初识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 初识Retrofit

    什么是 Retrofit ? Retrofit 是一套 RESTful 架构的 Android(Java) 客户端实现,基于注解,提供 JSON to POJO(Plain Ordinary Java ...

  2. 【Python】区分List 和String

    区分String和list String can't mutate 每次变更实质上开辟新的资源 List 可变更 警惕指针

  3. 【windows c】 遍历目录

    方式一: DWORD z_dRed = 0; char z_FilePath[MAX_PATH] = {0}; char z_newPath[MAX_PATH] = {0}; char z_tmpPa ...

  4. SVN常用功能介绍(二)

    说明 上一章节主要描述了SVN的简介.安装搭建,和项目管理人员对SVN的常用操作. 这章主要讲解,SVN对应角色组员,在实际运用中的常用操作. 将SVN服务器项目导入到开发组员的本地电脑里 方式一: ...

  5. 【Leetcode】【Medium】Word Break

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  6. C++中虚继承的作用及底层实现原理

    http://blog.csdn.net/bxw1992/article/details/77726390

  7. 华为HCNP实验 防火墙安全区域及安全策略配置（USG6000）

    防火墙安全区域及安全策略配置   一.学习目的 掌握防火墙安全区域的配置方法 掌握安全策略的配置方法   二.拓扑图         三.场景 你是公司的网络管理员.公司总部的网络分成了三个区域,包括 ...

  8. 贴现力 (force of discount)

    一.定义 用贴现函数a-1(t) 代替累积函数,在 t 时刻的贴现力为 增加一个负号使得贴现力为正. 二.重要的公式

  9. ZT Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性

    Android布局]在程序中设置android:gravity 和 android:layout_Gravity属性 分类: [Android基础] 2011-04-19 16:06 54739人阅读 ...

  10. Makefile 实例

    CROSS_COMPILE = HI_CFLAGS= -Wall -O2 -g -march=armv7-a -mcpu=cortex-a9 -mfloat-abi=softfp -mfpu=vfpv ...