流行框架angularjs

1	<input type="text" id="inp">

document.getElementById('inp').value;
$('#inp').val();
<input type="text" ng-model="val">

在官网上下载
通过CDN的方式引入到页面中
<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>

实现一个最基本的双向数据绑定的例子
通过例子介绍基本的指令及表达式
- 在使用了angularjsjs的页面，以ng-开头的属性，都可以称之为指令
- ng-app
  - 告诉angularjsjs它在页面中所要控制的范围
  - 页面加载完成angularjs会自动在页面中查找这个指令
  - 如果页面中没有这个指令,angularjs将不会启动
  - 告诉angularjs当前页面由哪一个模块来管理
- ng-model
  - 实现双向数据绑定(必须是表单元素)
- ng-click
  - 点击事件(和原生JS中的onclick事件作用一样)
- ng-init
  - 初始化数据
- 表达式介绍
  - 双大括号的形式称之为插值表达式
  - 在表达式中可以写ng中的变量
  - 可以显示字符串(显示的内容用引号包裹起来)
  - 在表达式中可以进行计算
  - 可以在表达式中写三元运算符
  - 执行angularjs函数
数据双向绑定(在页面html的表单上修改数据后，js根据对表单的事件监听，立马进行数据的修改，然后再传递到页面进行数据的更新)
- 数据：angularjs中的变量
- 双向: html js
- html=>js js=>html
实现双向数据绑定的条件
- 1.必须是表单元素
- 2.在表单元素身上写 ng-model指令

模块化开发带来的好处
- 方便管理, 复用,后期维护方便
- 解决代码冲突,方便多人协作开发
分析模块和控制器与页面之间的关系
定义模块的语法规则
定义模块时第二个参数加与不加的区别
- 加第二个参数是创建模块
- 不加第二个参数是获取模块
报错信息分析
- Module ‘myApp’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
- ‘myApp’ 这个模块是不可获取的！你要么拼写错误要么忘了加在他你要确保一个有效的模块做为了第二个参数的依赖
模块依赖
- 主模块依赖了其他模块,就相当于拥有了其他模块的功能

回顾传统网站(http://www.kuoda.com.cn/indexs.html)
单页应用网站(http://m.daqizhong.com/index.html#/)
单页Web应用,就是只有一张Web页面的应用
用户与页面交互时,用Javascript动态更新页面
分析单页面web应用
单页面应用程序的特点
- 整个网站由一个页面构成
- 公共部分只加载一次
- 利用Ajax局部刷新达到页面切换的目的
- 不会发生页面跳转白屏的现象
- 锚点与页面对应
单页web应用的应用场景
- 单页面应用对搜索引擎不友好不适合做面向大众的展示型网站
- 网站后台管理系统办公OA 混合App 等等不需要被搜索引擎搜索到的应用