如何利用AngularJS打造一款简单Web应用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何利用AngularJS打造一款简单Web应用相关的知识，希望对你有一定的参考价值。
在着手利用AngularJS创建这款简单的小Web应用之前，大家首先需要下载angular-seed项目。下载完成之后，大家需要打开对应的下载目录并安装其中的关联性以实现运行。具体代码如下所示：$ cd angular-seed $ npm install ## Install the dependencies
下一步则是利用以下代表启动节点服务器：
$ npm start ## Start the server
节点服务器启动并开始运行之后，我们需要打开浏览器并访问http://localhost:8000/app/index.html，此时其中会显示正在运行的默认应用。
接下来访问angular-seed项目文件夹下的该应用目录，应用程序的代码就保存在这里。
作为该应用程序的核心，app.js也将存放在该应用文件夹内。所有应用层级的模块与app.js内的路由都需要进行声明。
另外，大家还会在这里找到angular-seed的两个视图，即view 1与view 2。它们始终以默认形式存在。我们需要在应用文件夹中将这些视图删除。
现在开始我们要从零开始创建应用程序了：大家首先需要打开app.js并删除其中的全部已有代码。在app.js当中定义我们的应用程序路由，这要求大家使用ngRoute，AngularJS当中的模块之一。默认情况下app.js并不包含该模块，因此我们需要手动将其注入至应用程序当中从而加以使用。大家可以利用以下代码完成该AngularJS模块的添加工作：
angular.module(\'myApp\', [
\'ngRoute\'
])
ngRoute模块将带来一项重要的组件，即$routeProvider，其能够完美地对路由进行配置。我们需要使用以下代码将$routeProvider注入至angular-module的配置方法当中，从而完成路由定义：
\'use strict\';
angular.module(\'myApp\', [
\'ngRoute\'
]).
config([\'$routeProvider\', function($routeProvider)
// Routes will be here
]);
完成以上步骤后，现在我们就可以打开index.html了。将index.html当中的全部内容清除，只保留脚本引用以及div。
每一次进行路由变更时，我们都需要按照以上方法对div内容进行调整。
在视图当中创建符号
我们需要在app目录当中创建一个新的文件夹并将其命名为home。在该文件夹当中，我们额外再创建两个文件夹，分别为home.js与home.html。首先打开home.html并将以下代码添加进去：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href="http://getbootstrap.com/favicon.ico"> <title>AngularJS & Firebase Web App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"> <link href="justified-nav.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="jumbotron" style="padding-bottom:0px;"> <h2>AngularJS & Firebase App!</h2> </div> <form class="form-signin" role="form"> <input type="email" class="form-control" placeholder="Email address" required="" autofocus=""> <input type="password" class="form-control" placeholder="Password" required=""> <label class="checkbox"> <a href="#"> Sign Up</> </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> </body></html>
在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：
use strict\'; angular.module(\'myApp.home\', [\'ngRoute\']) // Declared route .config([\'$routeProvider\', function($routeProvider) $routeProvider.when(\'/home\', templateUrl: \'home/home.html\', controller: \'HomeCtrl\' ); ]) // Home controller .controller(\'HomeCtrl\', [function() ]);
现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：
\'use strict\'; angular.module(\'myApp\', [ \'ngRoute\', \'myApp.home\' // Newly added home module ]). config([\'$routeProvider\', function($routeProvider) // Set defualt view of our app to home $routeProvider.otherwise( redirectTo: \'/home\' ); ]);
如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：
<script src="home/home.js"></script>
现在一切工作已经完成，该应用随时准备加以运行了！要开始使用这款应用，我们需要重启服务器并将自己的浏览器指向http://localhost:8000/app/index.html以访问登入页面，在这里大家可以实现对该应用程序的访问。
如果大家需要使用Firebase（具体理由如前文所述），则需要首先创建一个Firebase账户。在账户创建完成后，我们将屏幕上所显示的已创建应用url添加进来，而后点击“管理该应用”。 参考技术A angularjs是一个前端web框架，官方文档和教程都比较多，可以看下:
英文文档：
中文：
angular.js的含义 前端框架的意思是，在前端用js来动态控制输出的内容。这样即使后端不太复杂，前端也能实现许多以前只能后端实现的功能。angular是mvvm结构，应该很容易明白。具体操作有：数据绑定（动态显示数据）、dom控制（迭代或者动态显示隐藏）、表单验证、把逻辑写到前端来、将html划分成组件以复用。
所以，如何利用angularjs打造web应用：利用angular动态控制页面展示内容与交互，实现不同的功能。本回答被提问者采纳
以上是关于如何利用AngularJS打造一款简单Web应用的主要内容，如果未能解决你的问题，请参考以下文章
图书Ionic实战:基于AngularJS的移动混合应用开发
NearbyService超简单集成教程get！助你打造一款更加便捷的社交聊天类应用
我想利用ionic，cordova，angularjs来制作一个简单的app应用，想知道具体该如何开始，能在浏览器测试就好