介绍
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多
特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
闲话：
angelur 前端必会angelur 代码易维护
vue 两个框架 vue 迅速占领前端市场
Angelur JS 有五个核心特性:
- 双向数据绑定
- 模板
- Mvvm model(模型) -view(视图)-viewModel(视图模型) 吸收了MVC的设计程序,
MVC model(数据)-view(视图)-controller(逻辑) - 依赖注入
- 指令
为什么使用angular
- 实现前后端的分离 ,后端只提供数据接口,路由,模板渲染等都在前端完成
- html 和 js 分离,展示和逻辑分离
- 减少 js 代码,减少DOM 元素查找,事件绑定等代码
- 适合 API 开发 适合单页应用 整个页面 只能见到一个html文件,应用不管多大,就只有这一个,跳转,靠路由切换,一个页面内,渲染不同的内容
内置指令
凡是以 ng- 开始的,都称为内置指令
1. ng-app 用于表示一个angelur 应用
angelur 会从ng-app 所在的标签开始,管理这个应用
一个页面(应用)中.,建议只存在一个ng-app
如果有多个,要手动启动对应的应用
目前的 ng-app="" 表示使用默认的 Angelur 应用
2. ng-init 初始化数据 ng-init = "a=b;c=d;..."
使用ng-init 初始的数据, 会挂载到根作用域
在开发正式项目是,不建议使用 ng-init 做数据初始化
应该交由 controller 去完成
看一段代码先：
/*默认使用angular的内置指令*/
angular
/* 链接angualr 必须的第一步*/
/* ng-init 初始化数据,这些数据可以在整个页面的任何一个地方是用.例如:包含在h1标签里面. 或者直接在页面上输出*/
{{ 5*4 }}
{{ 5>4 ? true : false}}
{{ name +"--"+age}}
*
=
{{one * two}}
{{name}}{{age}}
3. ng-model 将(表单)视图与模型进行(双向)绑定
- {{ x }}
{{ key+"--"+val }}
4. ng-repeat 遍历对象
遍历数组:ng-repeat ="x in arr";
遍历对象: ng-repeat = "(key,val) in obj";
还能遍历复杂数组,ng-repeat=""
- {{ x }}
//遍历普通数组
{{ key+"--"+val }}
//遍历对象
- {{ x+"-"+$first+"-"+$last+"-"+$middle+"-"+$index}}
//遍历数组,用angular提供的下标,是否是首个,最后一个,中间一个,下标是几
- {{item.name+"--"+item.price}}
//遍历复杂数组,json数据格式
{{x}}
//遍历有相同元素的数组,适用下标为跟踪依据,去遍历数组