首页 > 代码库 > angular.js 学习1

angular.js 学习1

2024-09-15 18:16:39   217人阅读

以前很早就听说了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=http://www.mamicode.com/"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="http://www.mamicode.com/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


联系
我们