AngularJS 前端开发开发工具下载集成 NODE 版本管理软件 NVMW 浏览器推荐数据绑定 (二)

最新推荐文章于 2024-04-14 09:30:17 发布

于立子

最新推荐文章于 2024-04-14 09:30:17 发布

阅读量134

点赞数

分类专栏： anrularJS 文章标签： javascript js

本文链接：https://blog.csdn.net/yulizi0215/article/details/104937110

版权

anrularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AngularJS 前端开发开发工具下载集成 NODE 版本管理软件 NVMW 浏览器推荐数据绑定 (二)

第一个demo 输出 helloworld

我们创建文件 angularjsDEMO
创建子文件夹 ch_01
创建 html 文件 ch_01_01.html

在这里插入图片描述

html 文件中引用 angular.js 文件

<script type="type/javascript" src="../angular-1.5.5/angular.js" ><script>

body 中增加

   <script type="text/javascript">
        document.write("hello world");
    </script>

接下来我们开发第一个 angularjs hello world

在这里插入图片描述
修改顶部文件

<html>    <html ng-app>

body 中增加: {{}} 这个就是 angularjs 表达式里面直接可以写业务逻辑 + - * / | | && 都可以.

<div>{{"hello world" }}</div>
<div>{{"hello  angularjs "}}</div>

在这里插入图片描述
输出一样的页面表示 angularjs 集成成功!

angularjs 双向数据绑定 ng-model

双向绑定的意思就是互相监听事件,如果有改变就互相的传值. 直接动态更新.

我们在代码的基础上增加作用域增加　ng-model=""

<input type="text" ng-model="name"> 
<div>{{name}}</div>

刷新页面查看: 在input 输入框输入数据　div 标签可以正常显示数据.

在这里插入图片描述

这里我们看到数据的输出直接在标签中使用了.
现实的业务中不建议这么使用.
我们修改div 标签:

<div ng-bind = "name" ></div>

替换 {{name}}

因为执行顺序的问题. {{}} 没有加载完成的情况下能够输出自己的代码. ng-bind 的方式不会.

AngularJS MVC MVVW 模式

如果做过 J2EE 项目我们熟悉他的模式 :

Controller 业务逻辑处理 controller

Model 操作数据模型 entity

View 视图展示 jsp

AngularJS 同样有这些 ,他对于 controller 做了扩展. 所以我们就叫他 MVW W就是 whatever ;

我们开始第一个 AngularJS 的 controller 这个 controller 以后将不支持,所以以后不要这么创建.

<!--<script> 
		 function LoginController($scope,$log)
		 {
		     $scope.pname =  'zhangsan';
		     $scope.pword  = '12345678';
		 }
</script>-->

模块化创建一个 controller
这里注意,因为我们制定了是 module 所以我们修改顶部的引用为:

<html lang="en" ng-app="app">

 <script>
     var app = angular.module("app",[]);
     app.controller("LoginController",function($Scope,$log)
     {
         $Scope.panme = "zhangsaan";
         $Scope.pword =  "12345678";
     }
     );

 </script>

编写如下代码:

     <div ng-controller="LoginController">
         <input type="text"  ng-model="pname" placeholder="用户名">
         <input type="password" ng-model="pword" placeholder="密码">
         <button>提交</button>
         <div>您输入的用户名:{{pname}}}</div>
         <div>您输入的密码:{{pword}}}</div>
     </div>

刷新代码,请求:
在这里插入图片描述

控制器的作用域

这里讲的是 ng-controller 的使用范围, 如果是并发的情况,他们就是独立使用, 例如:

我们修改:

 <script>
    function userController($scope,$log) {
        $scope.name = '张三';
        $log.info(""+$scope.name);
    }
    function infoController($scope,$log)
    {
        $scope.love = "李四";
        $log.info(""+$scope.name);
        $log.info(""+$scope.love);
    }
    var app = angular.module("app",[]);
    app.controller("LoginController",function($scope,$log)
        {
            $scope.pname = "zhangsaan";
            $scope.pword =  "12345678";
        }
    );
    app.controller("userController",userController);
    app.controller("infoController",infoController);

</script>

增加如下代码:

   <!--作用域的范围-->

    <div ng-controller="userController">
        <input  type="text" ng-model="name">
        <button>测试</button>
        <div>{{name}}</div>
    </div>


    <div ng-controller="infoController">
        <input  type="text" ng-model="love">
        <button>测试</button>
        <div>{{love}}</div>
    </div>

刷新页面: 看控制台的输出,表明了此作用域是彼此不受影响,只在当前 ng-controller 的作用域内. 业就是在当前的

标签内有效.

在这里插入图片描述

这里讲的是 ng-controller 的使用范围, 如果是嵌套的情况可以直接继承使用例如:

继承作用域: 对象继承

继承作用域: 构造方法继承

继承作用域: apply,call 继承

Angular JS 模块化划分

模块化划分 ,其实就是把 html页面按照模块化区分开.

例如：　注册页面: regitster.html
登录页面: login.html
通用JS : common.js

common.js

var loginModule = angular.module("loginModule",[]);
loginModule.controller("UserController",function ($scope,$log) {
    $scope.username ="admin";
    $scope.password ="123456";
    $scope.submit  = function () {
        alert("登录 userController");
    }
})



var regitsterModule =  angular.module("registerModule",[]);
regitsterModule.controller("UserController",function ($scope,$log) {
    $scope.username = "zhangsan";
    $scope.password = "654321";
    $scope.submit  = function () {
        alert("注册 userController");
    }
});

我们新增两个html页面,然后对比一下代码:

<!DOCTYPE html>
<html lang="en" ng-app="registerModule">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-controller="UserController">

        <input type="text" ng-model="username">
        <input type="password" ng-model="password">
        <button  ng-click="submit()">注册</button>

    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" ng-app="loginModule">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-controller="UserController">
        <input type="text" ng-model="username">
        <input type="password" ng-model="password">
        <button ng-click="submit()">登录</button>

    </div>
</body>
</html>

在这里插入图片描述

综上所述:

意思就是我们要把代码按照业务逻辑区分类似于后台的 controller

app
   module
         service1
         service2
         service3
         service4
         service_login
                  |---loginmodule.js
                  |---css
                  |          |-----login.css
                  |---js
                  |          |-----directives.js
                  |          |-----filters.js
                  |          |-----controller.js
                  |---views
                  |          |----login.html
         service_retister
                  |---retistermodule.js
                  |---css
                  |          |-----retister.css
                  |---js
                  |          |-----directives.js
                  |          |-----filters.js
                  |          |-----controller.js
                  |---views
                  |          |----retister.html