初识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. 【Python】卸载完Python3 之后 Python2 无法打开IDLE

    安装官方的Python带Idle但是却无法打开,百度谷歌了几种解决方法,加上自己的实际境况予以解决. 我的python是直接安装在C盘下的. 1.首先是设置环境变量: Path=C:\Python27 ...

  2. first-软件工程

    第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 之前高中班上男生特别喜欢软件这类的东西,每期电脑报都要买,我也会每期电脑报都会借来看,久而久之我就喜欢上 ...

  3. 如何修改settings.xml的镜像

    今天在下载一个maven依赖包时候,下载后一直显示的是upload的jar包,然后检查了下自己的settings.xml配置,发现依赖的还是以前的内网nexus得配置.所以下载不下来,现在改为ali的 ...

  4. C++异常安全

    转自:http://www.cnblogs.com/zgfLawliet/p/3417308.html   异常安全的代码是指,满足两个条件 1异常中立性 : 是指当你的代码(包括你调用的代码)引发异 ...

  5. 工作笔记—hibernate之QueryCriteria

    本人用的是sg-uap虚拟环境 //查询方法 //参数 RequestCondition 配合 controller 的 @QueryRequestParam注解可以将前台传入整个对象进行接收 //参 ...

  6. Pycharm使用中背景颜色和更改项目的Python版本

    一.背景颜色 颜色是每一个人都会去更改的,而且可以保护眼睛! 第二步: 选择图中画框的位置,便可以更改背景颜色! 二.项目版本的更改: python2 和 python3 有很大的不同,使用pytho ...

  7. js 数据格式化

    //金额增加千分号formatPrice(123456.78) = 123,456.78 function formatPrice(val) { var parts = val.toString(). ...

  8. js判断客户浏览器类型，版本

    在JS中判断浏览器的 类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌 却标准不一,因此时常需要根据不同 ...

  9. Oracle sql trace用法

    sql_trace是oracle提供的一个非常好的跟踪工具,主要用来检查数据库的异常情况,通过跟踪数据库的活动,找到有问题的语句. 一.概述:    SQL_TRACE是Oracle的一个非常强大的工 ...

  10. LaTeX-WinEdt 编辑器和 PDF 文件的 Acrobat 11 程序关联

    WinEdt 编辑器和 PDF 文件的 Acrobat 11 程序关联 CTeX 套装 2.8 版本以后,也就是09年9月以后的版本加入了SumatraPDF程序,将PDF文件与Acrobat程序取消 ...