分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

Angular JS(一)

发布时间:2023-09-06 01:21责任编辑:胡小海关键词:Angular

Angular JS就是俗称的Angular 1

Angualr 开发的核心就是视图和业务操作数据分离开来。

(一)Angular JS 指令简述

Angular中把具有特殊作用标签属性称为指令,这些指令全部以ng打头

ng-app指令可以指定当前视图由哪个模块管理,即angular指令的覆盖范围。

<body ng-app="app">

    <div>{{name}}</div>

<body>

<script>

    var app = angular.module("app",[ ]);

</script>

(二)控制器——创建与关联

控制器是我们编写业务逻辑的入口,在这里我们操作数据改变视图

<body ng-app="app">

  //关联控制器

    <div ng-controller="appCtrl" >{{val*val}}</div>

<body>

<script>

    var app = angular.module("app", [ ]);

    //app模块添加一个控制器,创建val变量

    app.controller("appCtrl",function(){

    var val = 10;

});

</script>

(三)$scope——灵活的数据

所以Angular提供了一个$scope对象,给这个对象添加的属性都可以在视图中访问,Angular能获得这些变量并且在视图中使用。

<body ng-app="app">

  //关联哪个控制器就可以使用哪个控制器的$scope数据 

    <div ng-controller="appCtrl">val*val</div>

</body>

<script>

    var app = angular.module("app",  [ ]);

    //App模块添加了一个控制器,控制器的主要作用是初始化和操作$scope

    app.controller("appACrtl", ["$scope",function($scope){

    $scope.val = 10;

}])

 

</script>

一个模块可以创建任意多个控制器

每个控制器可以关联视图中的一部分

<body ng-app="app">


    <div ng-controller="appHeaderCtrl">{{ val }}</div>

    <div ng-controller="appMainCtrl">{{ val }}</div>
    <div ng-controller="appFooterCtrl">{{ val }}</div>


</body>


<script>
    var App = angular.module(‘app‘, []);
    app.controller(‘appHeaderCtrl‘, [‘$scope‘, function($scope) {
    $scope.val = ‘头‘;
}]);


    app.controller(‘appMainCtrl‘, [‘$scope‘, function($scope) {
    $scope.val = ‘身体‘;
}]);


app.controller(‘appFooterCtrl‘, [‘$scope‘, function($scope) {
$scope.val = ‘脚‘;
}]);
</script>

 

Angular JS(一)

原文地址:http://www.cnblogs.com/yishichangan925/p/7763565.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved