AngularJS的简易利用(入门级)

   AngularJS诞生于二〇〇九年,由Misko Hevery
等人创办,后为Google所收购。是一款不错的前端JS框架,已经被用于Google的多款产品中间。

AngularJS有着许多特征,最为基本的是:MVC、模块化、自动化双向数据绑定、语义化标签、倚重注入等等。

                                                                       
                                          ———–百度百科

 

下边做入门介绍,本篇首要以代码的款式解析。

1.在web页面引入angularJS的js文件。

可以因而官网下载,也可以在百度上寻找,提议从官网上下载。

http://www.angularjs.net.cn/这个中文网地址。上面也有相关教程。

2.代码分析

下边是copy来的例子:

<!DOCTYPE html>
<html lang="en" ng-app="todoApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="angular.min.js"></script>

    <script>
angular.module('todoApp', []) //定义模块
    .controller('TodoListController', function() { //定义控制器
        var todoList = this;
        todoList.todos = [ //定义一些初始化的属性
            { text: 'learn AngularJS', done: true },
            { text: 'build an AngularJS app', done: false }
        ];

        todoList.addTodo = function() { //定义方法
            todoList.todos.push({ text: todoList.todoText, done: false });
            todoList.todoText = '';
        };

        todoList.remaining = function() { //定义方法
            var count = 0;
            angular.forEach(todoList.todos, function(todo) { //遍历todos
                count += todo.done ? 0 : 1;
            });
            return count;
        };

        todoList.archive = function() { //定义方法
            var oldTodos = todoList.todos;
            todoList.todos = [];
            angular.forEach(oldTodos, function(todo) {
                if (!todo.done) todoList.todos.push(todo);
            });
        };
    });
</script>
</head>

<body>
    <div ng-controller="TodoListController as todoList">

        {{todoList.remaining()}} of {{todoList.todos.length}} remaining [
        <a href="" ng-click="todoList.archive"></a>
        ]

        <ul>
            <li ng-repeat="todo in todoList.todos">
                <lable>
                    <input type="checkbox" ng-model="todo.done">
                    {{todo.text}}
                </lable>
            </li>
        </ul>

        <form ng-submit="todoList.addTodo()">
            <input type="text" ng-model="todoList.todoText" size="30" placeholder="请输入新的项目">
            <input type="submit" value="add">
        </form>


    </div>

    <div ng-app="myApp" ng-controller="myCtrl">
        名字: <input ng-model="name">
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = "John Doe";
        });
    </script>
</body>

</html>

  

里面ng-app是点名一个angularJS应用。

对应js代码为:angular.module(“todoApp”,[]);定义一个module模块

ng-controller指定一个控制器,指明该标签下所有的子元素都归该控制器管理。

对应js代码为:     .controller(‘TodoListController’, function(){});定义一个控制器

一个ng-app可以定义五个控制器。

本例是由此var todoList=this;让todoList代替了这些控制器。

透过定义todoList的习性和艺术向外显露这个控制器的可用属性和情势。

可以望见在html中是经过todoList属性的名字对其开展引用的。

其间{{}}代表数量绑定。

ng-model:表示把前台是数据绑定到控制器中,当然后台起初化有多少,也会呈现在前台。

ng-submit:定义在form标签中,代码提交表单,也足以在button标签添加ng-click达到相同的效用。

ng-repeat:重复属性,会对亟待遍历的元素生成对应个数的标签。

上述例子中就会生成对应todoList数目标span标签。

特性应用间接是todoList.todos。

主意的引用则为:todoList.addTodo()。

 

本来那只是里面一个爆出的点子。以后的篇章会介绍另外的。

 

相关文章