HTML5 & AngularJS学习

HTML5 & AngularJS：

// 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

span 行内元素，用于一行
这是一行且不会换行
p 块级元素，用于一段

这是一段文字(文字这两个字体是红色)

span 标签可以放在p标签里，p标签不能放在span标签里！

姓名为

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML

AngularJS 指令：
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-
AngularJS 使用 .directive 函数来添加自定义的指令

self-directive></self-directive>      // restrict : "E"<div self-directive></div>            // restrict : "A"<div class="self-directive"></div>    // restrict : "C"<!-- directive: self-directive -->    // restrict : "M", replace : true,<script>var app = angular.module("myApp", []);app.directive("selfDirective", function() {    return {        restrict : "M",        template : "<h1>自定义指令!</h1>"    };});</script>

ng-app 定义一个 AngularJS 应用程序根元素，
在网页加载完毕时会自动引导（自动初始化）应用程序
ng-controller
定义应用程序控制器,AngularJS 应用程序被控制器控制.

AngularJS 使用$scope 对象来调用控制器，$scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope(相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上
创建控制器时,可以将 $scope 对象当作一个参数传递
ng-init 初始化应用程序数据
ng-model 把元素值绑定到应用程序—将输入域的值与 AngularJS 创建的变量绑定
提供类型验证（number、email、required）。
提供状态（invalid、dirty、touched、error）。
为HTML元素提供CSS 类。
绑定 HTML元素到HTML表单。
ng-repeat 重复一个 HTML 元素
ng-show 可用于设置应用中的一部分是否可见
ng-hide 用于设置应用部分是否可见
ng-click 定义了 AngularJS 点击事件
ng-submit
ng-class

模块: 定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器,控制器通常属于一个模块
var app = angular.module(“myApp”, []);
“myApp” 参数对应执行应用的 HTML 元素
[] — 主应用模块的依赖模块

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据
POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);$http.post('/someUrl', data, config).then(successCallback, errorCallback);

AngularJS 表达式：
形式：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令功能相同。
AngularJS 将在表达式书写的位置”输出”数据

与 JavaScript 表达式比较：
类似：AngularJS 表达式可以包含字母，操作符，变量。
不同：AngularJS 表达式可以写在 HTML 中。
不同：AngularJS 表达式不支持条件判断，循环及异常。
不同：AngularJS 表达式支持过滤器。

AngularJS 使用动画需要引入 angular-animate.min.js 库:
动画:
是通过改变 HTML 元素产生的动态变化效果

var app = angular.module('myApp', ['ngAnimate']);

AngularJS 路由允许我们通过不同的 URL 访问不同的内容angular-route.js: