zoukankan      html  css  js  c++  java
  • 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()。
     
    当然这只是其中一个暴露的方法。以后的篇章会介绍另外的。
  • 相关阅读:
    08-认识margin
    07-border(边框)
    06-padding(内边距)
    05-盒模型
    04-层叠性权重相同处理
    03-继承性和层叠性
    MySQL安装与基本管理
    数据库概述
    并发编程练习
    selectors模块
  • 原文地址:https://www.cnblogs.com/xiaoai123/p/6702812.html
Copyright © 2011-2022 走看看