初识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. Android SQLite与AutoCompleteTextView

    读取SQLite中的数据显示在AutoCompleteTextView中,支持动态加入SQLite中不存在的数据. package zhang.ya; import java.io.File; imp ...

  2. 十一、使用a标签打电话、发短信、发邮件

    <a href="tel:400-888-6633">拨打电话<a> <a href="sms:19956321564">发 ...

  3. java实现哈弗曼树和哈夫曼树压缩

    本篇博文将介绍什么是哈夫曼树,并且如何在java语言中构建一棵哈夫曼树,怎么利用哈夫曼树实现对文件的压缩和解压.首先,先来了解下什么哈夫曼树. 一.哈夫曼树 哈夫曼树属于二叉树,即树的结点最多拥有2个 ...

  4. spring文章

    单元测试 spring +Junit 完美组合:https://blog.csdn.net/shan9liang/article/details/40452469#

  5. Sql Server中利用ISNULL方法判断数字并预设值

    1.ISNULL方法有两个参数,ISNULL(a,b),表达式含义为如果a为NULL,则设置该字段内容为b. 例如 table tab id sum 1 1 2 null select t.id,is ...

  6. javascript 随机数 生成 n-m

    例子:生成800-1500的随机整数,包含800但不包含1500 代码如下: 1500-800 = 700 Math.random()*700 var num = Math.random()*700 ...

  7. How to import .sql script

    How to import .sql script 1.Export .sql from pl/sql developer you can reference to other document in ...

  8. TCP、UDP、Socket 通信（原）

    说明:本随笔主要演示自己给自己发送消息例子,分别使用了TCP协议.UDP协议以及socket套接字通信.使用socket套接字了模拟TCP.UDP通信实现原理.其中有些源码都来自<C#高级编程 ...

  9. SNMP协议详解

    简单网络管理协议(SNMP)是TCP/IP协议簇的一个应用层协议.在1988年被制定,并被Internet体系结构委员会(IAB)采纳作为一个短期的网络管理解决方案:由于SNMP的简单性,在Inter ...

  10. pycharm 2016注册码

    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...