AngularJS的简单使用(入门级)

AngularJS诞生于2009年，由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">

        <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> [

        <a href="" ng-click="todoList.archive"></a>

        ]

        <ul>

            <li ng-repeat="todo in todoList.todos">

                <lable>

                    <input type="checkbox" ng-model="todo.done">

                    <span class="done-{{todo.done}}">{{todo.text}}</span>

                </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()。

当然这只是其中一个暴露的方法。以后的篇章会介绍另外的。

巴特西

AngularJS的简单使用(入门级)

最新文章

热门文章