Question

我正在尝试学习Angular JS并在我的网络应用程序项目中使用它，我正在寻找一些指导以及特定角度js问题的答案。我正在使用的技术堆栈是MySQL db，Java w / Spring Framework，HTML / CSS / Bootstrap / JS等。

该应用程序的目的基本上是一个＆＃34;社交媒体craigslist＆＃34;它将在哪里： 1.用户帐户 2.能够创建一个＆＃34; newsfeed-esque＆＃34;帖子（一个＆＃34;视图＆＃34;）
3.能够创建销售帖子（单独＆＃34;查看＆＃34;）
4.＆＃34;库存的视图＆＃34;
5.一个＆＃34;愿望清单＆＃34;的视图等（注意：项目2-5是通过位于我页面左侧的各种导航栏访问的，其目的是让页面的主要部分根据您单击的导航项切换内容..更多以后..）

我正在做的是编写一堆Javscript代码来调用我的Web服务（抓取静态内容以填充下拉菜单，发送登录用户登录信息等等）和＆lt;脚本＆gt;标签正在增长，所有这些都生活在我的index.html页面中，我认为使用像Angular JS这样的东西更有意义，并且结构有点不同而且＆＃34; modularize＆＃34;代码所以它在索引页面中并不是一个巨大的混乱。我也在做一些手动的.hide（）和.show（）JS的东西，所以我认为使用类似AngularJS的东西切换内容可能更有意义，而不是一次激活最多的一个.show（）然后必须尽可能多地执行.hide（），以手动切换内容。这听起来像SPA（单页应用程序）吧？

我已经研究过AngularJS StackOverflow帖子并查看了w3schools和其他有用的网站，但是我在如何构建这个问题时遇到了麻烦，并且不仅使用代码工作而且还使用组织方面的最佳实践。

1）我认为Angular会更容易隐藏和显示内容吗？

2）我想制作每个＆＃34;功能＆＃34;我的网站有自己的控制器，并有Controller1.js，Controller2.js等..但我需要有一个

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

在每个控制器的顶部排队还是我需要像主控制器这样的东西只有一次，然后从主控制器调用每个控制器？或者这甚至不是我应该怎么做呢？思考过程再次进行模块化，避免出现一个带有我所有JS逻辑的巨型野兽文件。

3）我认为我需要使用ng-route的东西（这是正确的吗？）才能隐藏和显示html内容？（上面列出的项目2-5）但是应该在哪个文件中存活？一个javascript控制器文件？ index.html的？其他

4）我读过每个应用程序只能有一个ng-view。这是否意味着您只能切换/更改ONE＆lt;的内容。 div>您的网络应用程序的/部分，或者您可以更改多个不同的div？

5）fyi - 我目前的文件结构就是这个......这应该是怎么回事？

-Java Resources (java code)
...
-WebContent
  -img
  -META-INF
  -resources
    -css (folder)
    -js (folder with js files - controllers)
  -WEB-INF
    -lib (folder)
    -views (folder)
    -xx-servlet.xml
    -web.xml
  -index.html
-pom.xml

我的很多问题都只是因为我是AngularJS的新手而没有在JS本身经验丰富，所以我试图更好地理解。感谢您提前提供的任何帮助。

Answer 1

首先，如果你想为每个应用程序使用多个视图，那么你应该使用angular-ui-router模块而不是angular-route模块。

现在，我们来处理文件。因此，为此您可以创建尽可能多的文件来为应用程序定义控制器，配置，服务和工厂。有三种方法可以做到这一点。

第一个是将var app = angular.module("MyApp",[]);放在第一个文件中，并在第一个文件下面的每个其他文件中定义app.controller('ctrl', ControllerFunction)之类的控制器和服务。但是，我个人不喜欢这种方式，因为你将应用程序作为全局变量公开。

第二种方法是使用angular.module('MyApp',[])在第一个文件中创建主模块，在其他文件中，您可以使用angular.module('MyApp').controller('ctrl', ControllerFunction)来获取它并定义控制器。这比前一种方式更安全。

第三种方法是在每个文件中创建一个不同的模块，并使用单个主模块中的所有模块作为依赖项。如下所示

在一个文件中

angular.module('Module1',[]).controller('ctrl1',CtrlFun1);

在另一个档案中

angular.module('Module2',[]).controller('ctrl2',CtrlFun2);

并在主文件中，主要模块，即引导

angular.module('MyApp',['Module1','Module2'])

这是在不同文件中定义服务的最安全方法。我个人建议在单个应用程序中使用多个js文件。因为在这里你不在乎暴露全局变量或单个模块，所以任何人都不能轻易地使用控制台注入一些代码。

如何使用Angular JS

1 个答案: