angularjs重新出发-基础篇

最新推荐文章于 2022-02-17 18:18:51 发布

原创最新推荐文章于 2022-02-17 18:18:51 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

angularJS 专栏收录该内容

19 篇文章

订阅专栏

本文深入解析AngularJS核心概念，涵盖ng-app、ng-controller、ng-bind等关键属性，及$eval()方法与ng-include指令的运用技巧，助你掌握AngularJS开发精髓。

angularjs重新出发-基础篇

一，属性和方法

一，属性和方法

1，ng-app属性

标明angularjs管理的边界，一般至于最外层的html标签或body标签
属性值为module模块名

2，ng-controller属性

html中通过ng-controller绑定控制器函数contr，在contr中定义绑定的变量数据等。
属性值为controller控制器名

<!DOCTYPE html>
<html ng-app="mod">
<head>
    <title></title>
    <script type="text/javascript"
            src="../script/angular.min.js">
    </script>
</head>
<body>
    <div ng-controller="test">
        <span>{{text}}</span>
    </div>
    <script type="text/javascript">
        angular.module('mod', [])
               .controller("test",["$scope", function($scope){
                   $scope.text="12345";
               }])
    </script>
</body>
</html>

3，ng-bind属性和{{}}

我曾经认为ng-bind毫无用武之地，实际应用时确实很少用。但是，{{}}和ng-bind有一些区别！

（1）闪现问题

{{}}----------在刷新时(页面加载缓慢情况下)，可能出现{{}}闪现出来的问题。
ng-bind----绑定数据，则会避免以上情况。

（2）组合字符串问题

{{}}----------便于组合字符串，变量加常量
ng-bind----不便于组合字符串，绑定数据会把其他数据"吞掉"，只显示绑定数据

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"
            src="../script/angular.min.js">
    </script>
</head>
<body>
    <div ng-controller="contr">
        {{ s }}
        <div ng-bind="s"></div>
        <div>{{str.name}};{{str.sex}}.</div>
        <div ng-bind="str.name">;</div>
        <div ng-bind="str.sex">.</div>
    </div>
    <script type="text/javascript">
        function contr($scope){
            $scope.s='hello,欢迎来到angular的世界！';
            $scope.str={name: 'a', sex: '男'};
        }
    </script>
</body>
</html>

在这里插入图片描述

4，$eval()方法

首先，js和angularjs两种表达式之间相互调用的方法

在angularjs中的表达式要调用传统的js代码，需要在控制器中定义一个方法，然后由表达式调用该方法即可（就是你天天写的调用angularjs绑定的方法）

在传统的js代码中需要执行angularjs中的表达式，则需要借助$eval()方法。（可能会用在某些条件下，需要变换绑定的数据或过滤器！）

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular与JavaScript表达式之间的相互调用</title>
    <script type="text/javascript"
            src="../script/angular.min.js">
    </script>
</head>
<body>
    <div ng-controller="c1_2">
        执行JavaScript表达式：<br/>
        <input type="text" ng-model="m" />
        <button ng-click="m1(m)">计算</button>
        <br/><br/>
        执行Angular表达式：<br/>
        <input type="text" ng-model="n" />
        <span ng-bind="$eval(n)"></span>
    </div>
    <script type="text/javascript">
        function c1_2($scope){
            $scope.m = 20;
            $scope.n = '20+1|number:0';
            $scope.m1 = function(e){
                $scope.m = e + 1 
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
可以在输入框中更改angular表达式，输出对应的值

5，ng-include属性

可以引入type="text/ng-template"的<script>元素
可以引入外部html

<!DOCTYPE html>
<html ng-app="mod">
<head lang="en">
    <meta charset="UTF-8">
    <title>ng-include</title>
    <script type="text/javascript"
                src="../script/angular.min.js">
        </script>
    <!-- 声明一个模板-->
    <script type="text/ng-template"
            id="base">
       <div>姓名：{{name}}</div>
       <div>性别：{{sex}}</div>
    </script>
</head>
<body>
    <!-- 调用模板-->
    <div ng-controller="test"
         ng-include="'base'">
    </div>
    <!-- 调用模板-->
    <div ng-controller="test2"
         ng-include="'1-4-1.html'">
    </div>
    <script type="text/javascript">
        var mod=angular.module("mod",[])
        mod.controller("test",["$scope",function($scope) {
            $scope.name = "张三";
            $scope.sex = "男";
        }])
        mod.controller("test2",["$scope",function($scope) {
            $scope.name = "李四";
            $scope.sex = "男";
        }])
    </script>
</body>
</html>

1-4-1.html

<div>
	<div>姓名：{{name}}</div>
    <div>性别：{{sex}}</div>
</div>

注意

报错不能跨域访问（使用ng-include指令的时候，会用到AJAX请求XMLHttpRequest像ng-include这样的指令，必须要有web容器的支持。直接用浏览器打开的index.html，并没有通过web容器访问，所以存在跨域访问问题）

解决方法：
1. 将代码部署到tomcat或者iis等web容器下，通过http访问即可
2. 可以使用前端开发神器webstorm，该工具运行html的时候，会自动启动内置的web容器
参考自：https://www.cnblogs.com/lyd2016/p/7157441.html
注意引用id或者html路径都为字符串，需要添加引号