angularjs学习笔记的完整项目结构

今天讲座的主要内容如下：1 .演示完整的项目结构2。$ scope 3的含义。模块化和依赖注入。

1.展示完整的项目结构。

以下所有代码均转载于@沙漠里可怜的秋天的老师。我重印了放在github上。你可以通过这个链接查看源代码。边看边学是最好的~ ~ ~ ~。

我们来看看这张截图。

这是一个完整的angularjs项目应该具有的目录结构。让我解释一下每个文件夹的含义。

1.css:不用说，放一些css样式的文件就可以了。

2 .框架：一般除了angularjs，还有一些第三方需要的前端框架(UIs)，比如bootstrap、ueditor等等。

3.imgs:不用说，把图片文件。

4.index.html:主文件。当然，如果项目文件很多，也可以单独设置一个文件夹放页面。

5.js:不用说，放入你的新js文件。

6 . TPS:全称是templates，意思是模板。它包含一些html代码。与angualrjs的指令命令中的templateUrl属性一起使用。

我们主要看一下TPS的用法：这里的TPS文件夹下有一个test.html文件，代码如下：

Ul第1行测试/li第2行测试/Li第3行测试/li/ul正如我们上面所说，这里的文件只是html的一部分，例如，它只是ul代码的一部分。然后有些人很惊讶。这样写有什么用？应该怎么用？不，让我告诉你如何使用它：

其实上节课我们提到过，不知道的人点击这里，可以看到第三点，我提到的指令法。意思是定义一个html标签，然后返回的html内容就是这里的ul部分。

让我们看看具体的使用代码：

var appModule=angular . module(' app '，[])；//app是html中ng-app指令的名称。appmodule.directive ('hello '，function(){//定义了一个名为hello return {restrict3360' e '，//template3360' div hi那里/div '的指令。template URL : '/tpls/test . html '，replace : true }；});上面代码的解释：定义了一个hello标签，当使用这个标签时，返回test.html的内容(模板和templateUrl都可以使用)。

为什么我们要把上面的ul内容放在一个单独的文件夹里？你现在明白了吗？只是在返回内容很多的时候直接使用链接对应，让代码看起来更清晰。

2.看看一些$scope。

让我们看看下面的图片，深入解释一些范围及其特性：

让我们看看上面的代码：首先，我们定义了一个名为HelloCtrl的控制器，它向$scope添加了一个属性问候语。问候语属性是一个对象，文本属性加上“Hello”的值，就这么简单。然后可以直接在页面中调用Hello . text，就可以得到“Hello”的值了。是不是很神奇？$scope到底是什么？为什么能实现这些功能？以下是它的特点，看完一定要有一定的了解。

1.$scope是一个作用域，也可以理解为一个对象。

2.$scope提供了一些工具和方法，例如$watch()和$apply()。

3.$scope也是一个执行环境(scope)。

4.子$作用域可以继承父$作用域的属性和方法。

5.每个Angular应用程序只有一个$scope($rootscope，位于ng-app中)。

3.模块化和依赖注入。

请看下面定义控制器的代码：

var myApp=angular . module(' angularpa '，[])；myApp.controller('HelloCtrl '，['$scope '，function($ scope){ $ scope . helling={ text : ' Hello ' }；}]);myApp.controller('ByeCtrl '，['$scope '，function($scope) { //.}]);还记得开头的定义控制器吗？直接使用function name(){ }的方法。慢慢地，我们发现，如果控制器太多，就会很难管理。为了实现angualrjs的模块化，我们需要改成上面的写法，然后我会给大家讲解这段代码的含义。

第1行：首先获取整个页面的modula名称“myApp”。angularApp是html中ng-app的值。

第3行：定义一个名为“你好Ctrl”的控制器；

第9行，同上。

就这样，我们在不知不觉中实现了模块化！

我们这里只调用了controller方法，第一节提到的directive、filter等方法应该在myApp上调用，实现响应函数。然后用多个模块完成一个项目，我们就实现了依赖注入！

好了，这就是使用这三个主要模块的说明。希望对大家的学习有帮助。以上笔记有什么不明白的地方，可以问我，我一定会给你答案。祝大家生活愉快！