初识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. qt中qlineedit和qtextedit右键菜单翻译成中文

    没有linguist和lupdate等命令需要安装Linguist: 在Terminal中输入: sudo apt-get install qt4-dev-tools qt4-doc qt4-qtco ...

  2. 关于cn.jedisoft.framework.annotations 的增删改查

    今天在做一个crud的功能的时候,调用api老是调用不同.奇怪的是 在add的时候能添加进去,而删除和修改的时候不能成功. 最后反应过来,我在修改和删除的时候用的主键id是int类型的,接口类型是不能 ...

  3. DevExpress中 TreeList控件的常规配置

    //以下为TreeList控件样式相关设置 this.treelist_SystemCfg.BackColor = Color.Transparent; this.treelist_SystemCfg ...

  4. mongodb 启动

    >mongod.exe --dbpath  C:\Environ\mongodb-3.0.6\data\db >mongod.exe --logpath "C:\Environ\ ...

  5. shell逻辑运算符 1

    逻辑卷标 表示意思 1. 关于档案与目录的侦测逻辑卷标! -f 常用!侦测『档案』是否存在 eg: if [ -f filename ] -d 常用!侦测『目录』是否存在 -b 侦测是否为一个『 bl ...

  6. windows生成硬链接

    因工作电脑需要同时使用pl/sql和toad工具需要同时配置32位和64位oracle client如此增加了维护tnsnames.ora的复杂程度使用windows硬链接可以减少工作量,每次只修改源 ...

  7. JsonPath教程

    1. 介绍 类似于XPath在xml文档中的定位,JsonPath表达式通常是用来路径检索或设置Json的.其表达式可以接受“dot–notation”和“bracket–notation”格式,例如 ...

  8. February 4 2017 Week 5 Saturday

    It takes a great man to be a good listener. 懂得倾听的人才是真的了不起. Don't make comments before you have learn ...

  9. ZT 3.1 依赖倒置原则的定义

    设计模式精解-GoF 23 种设计模式解析附 C++实现源码http://www.mscenter.edu.cn/blog/k_eckelP58 Template 模式获得一种反向控制结构效果,这也是 ...

  10. 对EJB的认识

    对EJB的认识 接触EJB以来有一段时间了,走马观花一样把它所涉及到的东西看了一遍,随着深入了解越来越感觉到ejb的很强大,用了java后觉的java好用.学历SSH觉的比java好用.学了ejb觉的 ...