angular(一)

angularjs第一章
?angluarjs介绍
·什么是angularjs
?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)。
?依赖注入 —— 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入门教程:http://www.ituring.com.cn/minibook/303
·http://blog.jobbole.com/46779/
·使用angularjs
·引入ng
?<body ng-app=“”>
<input type=“text” ng-model=“name” />
<div>
{{name}}
</div>
</body>
·指令
·介绍
?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、ng-model、ng-bind、ng-repeat等等。
·ng-app
?ng-app指令来标明一个AngularJS应用程序,并通过AngularJS完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。
引用方法很简单,如下所示:
<div ng-app>

</div>   
如上引用,一个AngularJS应用程序初始化就完成了并标记了作用域,也就是div元素就是AngularJS应用程序的”所有者”,在它里面的指令也就会被Angular编译器所编译、解析了。
·ng-init
?ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它,后面我们会介绍有关控制器和模块的知识。
如下所示,我们为应用程序变量name赋定初始值。
<div ng-app=“” ng-init=“name=‘tangcaiye’”>

</div>
我们不仅可以赋值字符串,也可以赋值为数字、数组、对象,而且可以为多个变量赋初始值,如下所示:
<div ng-app=“” ng-init=“width=3;length=5”>

</div>
//或者

</div>
后面我们还会学习使用控制器来初始化数据的方式,接着我们来学习如何来调用这些已经初始化了的值。
·ng-model
·在AngularJS中,只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素,实现model和view的双向绑定。
如下示例,使用ng-model指令对数据进行绑定。
<div ng-app=“”>

请输入任意值:<input type=“text” ng-model=“name”>

你输入的为: {{ name }}

</div>
ng-model把相关处理事件绑定到指定标签上,这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。
以上介绍了ng-model的单向绑定(view->model)后面控制器我们会用到它的双向绑定功能。
ng-model原理
1.angular加载完成之后会启动,首先找 ng-app指令
2.找到后认为ng-app里面的所有的内容都归angular来管
3.找子层标签里所有的指令,然后就可以找到ng-model
4.找到后会生成数据模型,然后挂在根作用域上面。
5.然后下面所有的标签都可以读取ng-model的值。
·表达式
·案例一
·<body ng-app=“” ng-init=“num1=0; num2=0;”>
<input type=“text” ng-model=“num1” />
<input type=“text” ng-model=“num2” />
<div>
{{num1*num2}}
</div>
</body>
·案例2
·<body ng-app=“”>
<input type=“text” ng-model=“name1” />
<input type=“text” ng-model=“name2” />
<div>
{{name1 +” “+ name2}}
</div>
</body>
·初始化对象
·<body ng-app=“” ng-init=“person={name1:’hello’,name2:’’};”>
<input type=“text” ng-model=“person.name1” />
<input type=“text” ng-model=“person.name2” />
<div>
{{person.name1 +” “+ person.name2}}
</div>
</body>
·初始化数组
·<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<div>
{{arr[0]+arr[2]}}
</div>
</body>
·ng-bind
·指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。
如下使用ng-bind指令绑定把应用程序数据。
<div ng-app=“”>
    请输入一个名字:<input type=“text” ng-model=“name”>
    Hello <span ng-bind=“name”></span>
</div>
PS:使用花括号语法时,因为浏览器需要首先加载页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容,所以对于首个页面中的数据绑定操作,建议采用ng-bind,以避免其未被渲染的模板被用户看到。
·<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<div>
{{arr[2]}}
<!—<span ng-bind=“arr[2]”></span>—>
</div>
</body>
·ng-cllick
?AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。
对按钮、链接等,我们都可以用ng-click指令属性来实现绑定,如下简单示例:
<div ng-app=“” ng-init=“click=false”>
    <button ng-click=“click= !click”>隐藏/显示</button>
    <div ng-hide=“click”>
        请输入一个名字:<input type=“text” ng-model=“name”>
        Hello <span ng-bind=“name”></span>
    </div>
</div>
PS:ng-hide=“true”,设置HTML元素不可见。
ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上,当浏览器在该DOM元素上鼠标触发点击事件时,Angular就会调用相应的方法。
·ng-repeat
?ng-repeat指令,遍历一个数据集合中的每个数据元素,并且加载HTML模版把数据渲染出来,当我们要向HTML容器节点中添加更多类似DOM元素的时候,使用ng-repeat是再好不过了。
ng-repeat指令对于集合中(数组中)的每一项都会渲染一次HTML元素。
?<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<ul>
<li ng-repeat=“x in arr”>{{x}}</li>
</ul>
</body>
?<body ng-app=“” ng-init=“arr=[{‘user’:’zhangsan’,’pass’:’1234’},{‘user’:’lisi’,’pass’:’54321’}]”>
<ul>
<li ng-repeat=“x in arr”>
<span>{{x.user}}</span>
<span>{{x.pass}}</span>
</li>
</ul>
</body>
?<body ng-app=“” ng-init=“arr=[{‘user’:’zhangsan’,’pass’:’1234’},{‘user’:’lisi’,’pass’:’54321’}]”>
<table border=“1”>
<tr ng-repeat=“x in arr”>
<td>{{x.user}}</td>
<td>{{x.pass}}</td>
</tr>
</table>
<input type=“text” ng-model=“arr[0].pass” />
</body>
?<body ng-app=“” ng-init=“obj={‘user’:’tangcaiye’,’pass’:’12345’,’sex’:’man’}”>
<table border=“1”>
<tr ng-repeat=“(key,value) in obj”>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</body>
·ng-class
?ng-class是AngularJS预设的一个指令,用于动态自定义dom元素的css class name
?<div ng-class=“{true: ‘active’, false: ‘inactive’}[isActive]”></div>
?<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
.active{
color: red;
}
.inactive{
color: green;
}
</style>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
</head>
<body ng-app=“” ng-init=“isActive=false”>
<input type=“text” ng-model=“name1” />
<input type=“text” ng-model=“name2” />
<div ng-class=“{true:’active’,false:’inactive’}[isActive]”>
{{name1 +” “+ name2}}
</div>
</body>
·ng-include
?ng-include就是将多个页面的公共页面提取出来,如header.html,footer.html等,在每个页面用
<div ng-include=“’header.html’”></div>
来引入。
 
注意: 
1. 必须用web容器打开站点才能成功,用本地文件的模式访问会报错
2. ng-include的值是如果要写为文件名的话需要加单引号,否则会被当作一个变量来处理。

时间: 2024-11-03 21:54:24

angular(一)的相关文章

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b

Angular 2基础(一) 环境搭建

Angular2是一款开源JavaScript库,由Google维护,用来创建页面应用程序.正式发布于2016年9月,基于ES6开发. 一.准备工作 使用Angular2开发,需要预先做一些配置上的配置,如NPM.Node.Js.Git等,还要对TypeScript有个大概的了解. a)NPM是随同NodeJS一起安装的包管理器,那应该类似NuGet的作用了.NPM集成在了NodeJS安装包,可以一起安装,在CMD输入npm –v和node –v可以验证是否已安装. b)TypeScript则是

angular踩坑之路:初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

angular参考手册拷贝

AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-check

angular 动画

ngAnimate 做了什么? ngAnimate 模型可以添加或移除 class . ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画. AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-swit

angular.copy和angular.extend

angular.copy用于深复制,而angular.extend用于拓展.     angular.copy(src,[dst]) src:源对象 dst:目标对象,复制的对象 js中 '= '操作符复制的是指针,所以前后两个变量指向的还是内存中的同一个对象,所以在其中一个变量上操作该对象时,对另外一个变量也会生效.而angular.copy方法是深复制,会在内存中再生成一个对象,两个变量彼此独立,互不影响. 接收一个必须参数src,一个可选参数dst.如果dst没有提供,就会创建对象或者数组

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

Angular this vs $scope

this vs $scope ------------------------------------------------------------------------------ 'this' vs $scope in AngularJS controllers How does this and $scope work in AngularJS controllers? Short answer: this When the controller constructor functio