AngularJS 学习笔记（三）

最新推荐文章于 2022-12-09 16:14:24 发布

原创最新推荐文章于 2022-12-09 16:14:24 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJS 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨AngularJS MVC架构，解析其控制器、视图与模型的工作原理，并通过实例讲解$scope作用域、$rootScope服务及控制器继承等核心概念。此外，还讨论了依赖注入中的代码压缩问题与模块的run方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angularjs MVC $scope作用域 AngularJS模块的run方法，以及依赖注入中代码压缩问题

1、AngularJS MVC

model：数据模型层

view：视图层，负责展示

controller：业务逻辑和控制逻辑

优点：代码模块化代码逻辑比较清晰、可移植性高、后期维护方便，代码复用，代码模块越来越大的时候，切分职责是大势所趋。

缺点：运行效率稍低一些

2、AngularJS $scope作用域

$scope多控制器单独作用域

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

</div>

</div>

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

app.controller('firstController',function($scope){

$scope.name='zhangsan';

});

app.controller('secondController',function($scope){

$scope.name='lisi';

})

</script>

</body>

</html>

2 $rootScope服务

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

姓名：{{name}}

年龄：{{age}}

</div>

姓名：{{name}}

年龄：{{age}}

</div>

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

app.controller('firstController',function($scope,$rootScope){

$scope.name='zhangsan';

$rootScope.age='30';

});

app.controller('secondController',function($scope){

$scope.name='lisi';

})

</script>

</body>

</html>

控制器继承

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

</div>

</div>

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

app.controller('firstController',function($scope){

$scope.name='zhangsan';

$scope.age='40';

});

app.controller('secondController',function($scope){

$scope.name='lisi';

$scope.sex='男';

})

</script>

</body>

</html>

依赖注入中代码压缩的问题

<!doctype html>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

</div>

</div>

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

app.controller('firstController',['$scope',function($scope){

$scope.name='zhangsan';

$scope.age='40';

});

app.controller('secondController',['$scope',function($scope){

$scope.name='lisi';

$scope.sex='男';

})

</script>

</body>

</html>

4 AngularJS模块的run方法

run方法初始化全局的数据，只对全局作用域起作用如$rootScope

var m1=angular.module('myApp',[]);

m1.run(['$rootScope',function($rootScope){

$rootScope.name='hello'

}]);

console.log(m1);

</script>

AngularJS 学习笔记 （三）

AngularJS 学习笔记（三）