angular.js 学习1
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular.js 学习1相关的知识，希望对你有一定的参考价值。
以前很早就听说了ng,但是一直没有去接触去学习，那时觉得不做一个后台不学h5不学js框架，直到前一段时间基于tp3.2,自己能完成简单的pc站后台了，才开始着手h5和ng的学习。
看见ng的文档还是比较兴奋的，因为：
红圈的地方在tp上或是vue(曾经根据官方文档自学了基础部分)都是有的，（至于依赖注入好像是在tp5才有。觉得应该上手起来不会太难。
下文为了简便统一把AngularJs写成ng。
开始了，angular:
1：首先谈及指令，何为指令呢？
指令可以理解为声明特殊的标签或属性
ng内置了很多的指令，你所看到的所有以ng开头的所有标签，如ng-app、ng-init、ng-if、ng-model等,这和vue是很相像的，v-model，v-on，v-if等。
ng-app：用于标识页面是一个AngularJs页面。一般加载html的根对象上
ng-init：用于初始化了一个变量
ng-model：我们可以用ng-model对input输入框进行绑定，从而我们可以使用动态的获取数据对象的值。你可以认为ng-model是一个指定的属性，就像html元素的属性。这里的双向数据绑定可以用在很多表单元素上，
比如input、textarea、select。ng利用ng-model这个指令绑定了一个数据，而这个数据是我们希望能够通过用户输入操作而更新的数据
2：第一个ng demo 初识指令：
<!DOCTYPE html> <html ng-app lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> name: <input type="text" ng-model="name">{{name}} </div> <script src="angular.min.js"></script> </body> </html>
表现为：
ng通过表达式的方式将数据绑定到HTML标签内。ng的表达式写在双大括号内：{{name}}，ng-model指令实现双向数据绑定。当我们改变输入框的值时，对应的改变会反应到{{name}}表达式上。
2：第二个ng demo 初识模版：
1：以tp为例，所有页面的渲染都是在服务端来完成的。模版布局，模版继承，变量输出等，这样不可避免会加重服务器端的压力，
2：ng有内置的前端模板引擎，即所有页面渲染的操作都是放在浏览器端来渲染的。
3：在ng中的模板就是指带有ng-app指令的HTML代码。ng发现Html页面是否需要用ng模板引擎去渲染的标志就是ng-app标签
4：在ng中，我们写的其实并不是纯的Html页面，而是模板，最终用户看到的Html页面（也就是视图）是通过模板渲染后的结果。
见代码：
<!DOCTYPE html>
<html ng-app="cApp">
<head>
<meta charset="UTF-8">
<title>ng demo2</title>
<script src="angular.min.js"></script>
<script>
(function() {
// 创建模块
var mainApp = angular.module("cApp",[]);
// 创建控制器，并注入scope
mainApp.controller("tempController", ["$scope", function ($scope) {
$scope.val = "hello world";
}]);
})()
</script>
</head>
<body>
<h2>ng模版演示</h2>
<div ng-controller="tempController">
<div>
<input type="text" ng-model="val">
<h4>{{val}}</h4>
</div>
</div>
</body>
</html>
表现为：
此时你可能会觉得，这和上面的数据绑定不是一模一样吗？为什么要多写多余的代码呢？
我们先来探究与第一个demo的不同。
（1） ：ng-app="cApp"
（2） : ng-controller="tempController"
（3） ：
<script> (function() { // 创建模块 var mainApp = angular.module("cApp",[]); // 创建控制器，并注入scope mainApp.controller("tempController", ["$scope", function ($scope) { $scope.val = "hello world"; }]); })() </script>
会发现多出来这三个不同，当把三个任何一个去掉的时候双向绑定都不会生效。
此时，可以理解为指定的某一个模块进行操作输出。
（未完待续..
以上是关于angular.js 学习1的主要内容，如果未能解决你的问题，请参考以下文章
“未捕获的类型错误：无法在 Websocket Angular JS 上读取未定义的属性‘延迟’”