Web全栈笔记之Angular基础

来源：互联网发布：kindle保护套淘宝店铺编辑：程序博客网时间：2024/06/06 01:11

简介

AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。

AngularJS有五个主要核心特性，如下介绍：

双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。
模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
MVVM —— 吸收了传统的MVC设计模式但又不是传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。( M数据层 View试图 C控制)
依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。
前后端分离，后端只提供数据接口，路由，模板渲染等都在前端完成html和js分离,展示和逻辑分离
减少JS代码,减少DOM元素查找，事件绑定等代码
适合API开发

学习资料

菜鸟教程：http://www.runoob.com/angularjs/angularjs-tutorial.html

api手册：http://docs.angularjs.cn/api/ng/service/$http#jsonp

github地址：https://github.com/angular/angular.js//AngularJS下载

angularjs入门教程：http://www.ituring.com.cn/minibook/303

指令

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。

AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。

AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”，它本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以写在元素的名称里，属性里，css类名里，注释里。

当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：

ng-app:指令在网页加载完毕时会自动引导（自动初始化）应用程序。ng-init:指令为 AngularJS 应用程序定义了 初始值。ng-model:指令 绑定 HTML 元素 到应用程序数据。ng-bind: 表达式把数据绑定到 HTMLng-repeat:指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。ng-click:绑定事件ng-show:显示ng-hide:隐藏ng-class:相当于JS的className

代码演示1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src='angular.min.js'></script></head><!--ng 简写angular ng-app告诉angular来管理页面的代码--><body ng-app="" ng-init="maopao='小强'" >    <!-- 绑定数据 第一种方法 这种绑定数据的方法 js必须放在前面 否则刷新会出现div的内容-->    <!--ng-model: 用来获取文本框的值,是于input的value值进行了绑定。-->    <input type="text" ng-model="maopao">    <!--<div>-->        <!--{{maopao}}-->    <!--</div>-->    <!--绑定数据 第二种方法 这种绑定数据的方法 js可以放在后面 不会出现div的内容-->    <div ng-bind="maopao"></div>    <div ng-bind="maopao"></div></body><!--    ng-model原理:    1.angular加载完成之后会启动,首先找ng-app指令    2.找到后认为ng-app里面的所有内容都贵angular来管    3.找到子层标签里的所有指令,就可以找到ng-model    4.找到之后生成数据模型,然后挂载根作用域上面.    5.然后下面所有标签都可以读取ng-model的值--></html>

代码演示2

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="angular.min.js"></script></head><body ng-app='' ng-init="bol=ture">    <button ng-click="bol=!bol">显示隐藏</button>    <div ng-show="bol">这是div1</div>    <div ng-hide="bol">这是div2</div></body></html>

代码演示3(ng-repeat数组)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="angular.min.js"></script></head><body ng-app="" ng-init="arr=[10,2,3,4,5,6,7,8,9,10]">    <ul>        <!--循环数组 加上track by $index 数组可以重复-->        <li ng-repeat="value in arr track by $index">            {{value}}        </li>    </ul></body></html>

代码演示4(ng-repeat json)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="angular.min.js"></script></head><body ng-app="" ng-init="arr=[{'user':'zhangsan','pass':'12345'},{'user':'lisi','pass':'54321'}]"><ul>    <!--循环json json ng-repeat="json in arr相当于for in循环 把数组里面的东西循环出来 arr的长度多少 就循环多少条-->    <li ng-repeat="json in arr">        用户名:{{json.user}}<br>        密码:{{json.pass}}    </li></ul></body></html>

代码演示5(ng-repeat key value)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="angular.min.js"></script></head><body ng-app="" ng-init="obj={'aser':'tangcaiye','bass':'12345','sex':'man'}"></body>    <ul>        <!--循环key值和value值-->        <li ng-repeat="(key,value) in obj">            key:{{key}}<br>            value:{{value}}        </li>    </ul></html>

代码演示6 (切换)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">    .active{        color: red;    }    .inactive{        color: green;    }    </style>    <script type="text/javascript" src="angular.min.js"></script></head><body ng-app="" ng-init="bol=true">    <!--        ng-class:用于动态自定dom元素的classname    -->    <button ng-click="bol=!bol">切换classname</button>    <div  ng-class="{true:'active',false:'inactive'}[bol]">    我是内容    </div>    <!--<div  ng-class="bol?'active':'inactive'">-->        <!--我是内容-->    <!--</div>--></body></html>

代码演示7

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="angular.min.js"></script></head><body ng-app="">        <!--获取另外一个html文件的内容-->        <div ng-include="'header.html'"></div>        <div class="content"></div>        正文内容        </div></body></html>

代码演示8

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="angular.min.js"></script></head><body ng-app="myApp" ng-controller="com">    <!--添加事件 {{name}}等于abc-->    <div ng-click="add()">{{name}}</div>    <ul>        <li ng-repeat="value in arr track by $index">            {{value}}        </li>    </ul>    <button></button></body><script type="text/javascript">   //引入模块    var app = angular.module("myApp",[]);    app.controller("com",function($scope){        $scope.name="abc";        $scope.arr=[1,2,3];        //点击事件函数        $scope.add = function(){            //添加长度+1进去 arr 数组            $scope.arr.push($scope.arr.length+1);        }    });</script></html>

1 0