Angular Js快速入门

最新推荐文章于 2021-08-06 02:30:39 发布

Rainbow_Xjj

最新推荐文章于 2021-08-06 02:30:39 发布

阅读量861

点赞数 1

本文链接：https://blog.csdn.net/sky_sunshine_x/article/details/70824277

版权

一、Angular Js快速入门

1.简介

Angular Js是一个框架，它可通过<script>标签添加到HTML页面。

2.特性

（1）MVC：将后台的MVC模式写入了前端语言中。

（2）模块化：是一系列函数的集合，当应用被启动时，函数就会被执行。主要利用 Angular.module来定义模块，也是Angular Js 中的亮点。

（3）数据双向绑定：绑定的是标签中的属性值<==>JS中的变量

当标签的属性值发生变化->angular自动给JS中的变量赋值
或者JS中的变量发生变化->angular自动给标签中的属性值赋

但是：不会重复执行代码

（4）语义化标签：

（5）依赖注入：有隐式注入和显式注入，隐式注入不需要开发人员干预，Angular Js 自动根据参数的名称进行识别和注入数据；显式注入需要开发人员通过字符串描述，告诉angular需要注入的对象名称，这样js在优化过程中，对子符串不会压缩的，显示的进行依赖的描述。在案例和项目中，使用显式注入。

3.入门第一弹

|-- ng-app="myApp"   程序运行入口，加载myApp模块
        |-- angular.module("myApp", []);
            |-- angular.controller("myCtrl", function(){});
                |-- function($scope) {}
                    |-- $scope.hello = "值";

4.基础语法结构

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<!--
    6. 基础语法：通过ng-controller来将控制器和对应的标签绑定
    定义好了控制器的作用范围【开始标签~结束标签之间】
-->
<div ng-controller="myCtrl" ng-init="count=1">
    <!--
        7.基础语法结构：
         mustache语法~ 通俗的说，就是双大括号！用于输出变量的数据、进行数据的运算等等，但是mustache语法，由于加载如果缓慢的情况会出现直接将大 括号打印到页面上的问题，所以通常项目开发时，使用ng-bind来代替
    -->
    <!--
         8. ng-init这个东西，主要用来在标签中初始化一些变量数据【不推荐】
    -->
    {{name}} | <sapn ng-bind="name"></sapn>
    {{count}} | <span ng-bind="count"></span>
</div>
<hr>
<div>
    {{name}}
    {{count}}
</div>
<script>
    /* 3. 定义模块 */
    var app = angular.module("myApp", []);
    /* 4. 定义控制器 */
    /* 5. 控制器的参数$scope 是不需要传递数据的，AngularJS会自动给它赋值
    *   $scope上可以挂在数据，用于当前控制器的范围
    *  */
    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
</script>
</body>
</html>