初识AngularJS

AngularJS 为了克服HTML在构建页面上的不足，通过新的属性和表达式扩展了 HTML（AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML）。

1.四个核心思想：依赖注入，模块化，双向绑定，语义化标签

2.优点：简化代码，加快开发，不用像jQuery那样操作复杂的DOM代码，只需改变数据模型即可。

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

1、ng-app=" "  指令定义angularJS的使用范围，声明angularJS管理边界

2、ng-model="变量"  定义变量名；

3.AngularJS 表达式写在双大括号内：{{ expression }}，表达式把数据绑定到 HTML，将在表达式书写的位置"输出"数据。表达式可以包含文字、运算符和变量等

4.AngularJS 模块（Module） 定义了 AngularJS 应用。用ng-app指令指明了应用

定义方法：angular.module('自己命名', []);

5.AngularJS 控制器（Controller） 用于控制 AngularJS 应用。用ng-controller 指明了控制器。

控制方法：.controller('控制器名字', function($scope) { $scope.变量= "值";});    $scope应用程序指向的HTML元素

<!DOCTYPE html>

<html lang="en" ng-app="todolist"><!--ng-app指令声明angularJS管理边界，命名为todolist-->

<head lang="en">

    <meta charset="UTF-8">

    <title>todolist</title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>

</head>

<body style="padding: 10px;" ng-controller="TaskCtrl">

    <div class="input-group">

        <input ng-model="task" type="text" class="form-control"/>

        <span class="input-group-btn">

            <button class="btn btn-default" ng-click="add()">提交</button>

        </span>

    </div>

    <h4 ng-hide="tasks.length==0">任务列表</h4>

    <!--此处用ng-if="tasks.length>0"也可以，区别是ng-hide不论表达式成功与否，h4标签都会先在生成出来，但ng-if不会-->

    <ul class="list-group">

        <li ng-repeat="item in tasks track by $index" class="list-group-item">

            {{item}}

            <a ng-click="tasks.splice($index,1)">删除</a>

        </li>

    </ul>

</body>

<script src="js/angular.min.js"></script>

    <script>

        var ap = angular.module('todolist',[]);//在js中要声明todolist,使用angular.module

                ap.controller('TaskCtrl',function($scope){//需要控制angularJS内容，使用控制器.controller,控制器名字为TaskCtrl,需在HTML中绑定

                    //自带变量$scope

                    $scope.task="";//使用ng-model="task"。ng-model指令把元素值（比如输入域的值）绑定到应用程序

                    $scope.tasks=[];//使用ng-repeat="item in tasks"

                    $scope.add=function(){

                        $scope.tasks.push($scope.task);//将task中内容添加到tasks数组中，js数组中不允许添加相同内容,通过track by $index用下标解决

                    }

                })

    </script>

</html>

此例用anjularjs简单实现了一个todolist,具备增加删除功能。

其中用到的指令：ng-app，定义应用程序的根元素

ng-controller，定义应用的控制器对象

ng-model，绑定 HTML 控制器的值到应用数据

ng-repeat，ng-repeat="expression" 指令用于循环输出指定次数的 HTML 元素，集合必须是数组或对象，expression表达式定义了如何循环集合，此例通过数组下标

ng-if，ng-if 不同于ng-hide，其是从 DOM 中移除元素

ng-hide，隐藏或显示 HTML 元素

ng-click，定义元素被点击时的行为

angular.js-1初识的更多相关文章

  1. angular.js快速入门 hello world

    我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  4. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  5. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  6. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  7. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  8. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  9. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  10. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

随机推荐

  1. 《Visual C++ 2010入门教程》系列一：关于Visual Studio、VC和C++的那些事

    原文:http://www.cnblogs.com/Mrt-02/archive/2011/07/24/2115606.html 作者:董波 日期:2010.6.15 写在前面 在我还在上学的时候,我 ...

  2. Linux ->> UBuntu ->> Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailable)

    今天在Ubuntu 14.04下用apt-get目录安装SSH的时候发生了这个错误提示.经过一番查找了解可能发生的原因. 首先apt作为一个软件更新机制,每次运行的时候会对apt数据库加锁.当发生上面 ...

  3. SQL Server ->> 关于SQL Server Agent Job执行步骤时的用户上下文（User Context）问题

    这是最近项目相关和自己感兴趣的一个问题:SQL Server Agent Job有几种方法可以以特定用户上下文去执行任务步骤的? 这个事情需要分几种情况来说,因为对于不同类型的任务步骤,SQL Ser ...

  4. Studying TCP's Throughput and Goodput using NS

    Studying TCP's Throughput and Goodput using NS What is Throughput Throughput is the amount of data r ...

  5. 事件循环进阶：macrotask与microtask

    这段参考了参考来源中的第2篇文章(英文版的),(加了下自己的理解重新描述了下), 这里没法给大家演示代码,我就简单说下我的理解吧. promise和settimeout 在一起的时候执行顺序是个有意思 ...

  6. Net编译原理简单

    转载:http://blog.csdn.net/sundacheng1989/article/details/20941893 首先简单说一下计算机软件运行.所谓软件运行,就是一步一步做一些事情.计算 ...

  7. 你所不知道的C和C++运行库 标签： vc 2017-05-26 10:33 41人阅读 评论(0) 收藏

    在使用vs2013调用vc2005编译出的dll时出现错误,遂将源程序用vs2013编译出dll,再用vs2013调用错误消失,不解.寻找原因时有人说"VC库版本不一样",故查找C ...

  8. EJB 3.1 @Startup @Singleton sequence

    The annotation javax.ejb.Startup (@Startup) is used to mark an EJB so to make the EJB can be brought ...

  9. 可用的rtmp卫视直播地址

    http://blog.csdn.net/chinabinlang/article/details/45092297[ 可用的rtmp卫视直播地址] http://blog.csdn.net/chin ...

  10. WSGI、flup、fastcgi、web.py、uwsgi

    ==================        网上别人的理解 =================== http://www.douban.com/note/13508388/ 1.Apache/ ...