如何使用Angular JS构建应用程序

Posted 2021-05-05

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

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

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

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

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

2）我想让我的网站的每个“功能”都有自己的控制器，并有Controller1.js，Controller2.js等。但我需要有一个

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

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

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

4）我读过每个应用程序只能有一个ng-view。这是否意味着您只能切换/更改Web应用程序的ONE <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本身的经验，所以我想更好地理解。感谢您提前提供的任何帮助。

答案

首先，如果你想为每个应用程序使用多个视图，那么你应该使用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文件。因为在这里你不在乎暴露全局变量或单个模块，所以任何人都不能轻易地使用控制台注入一些代码。