首页 / ANGULAR / 利用AngularJS实现一个单页应用

利用AngularJS实现一个单页应用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用AngularJS实现一个单页应用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3623字，纯文字阅读大概需要6分钟。

内容图文

看了下angular 的route，用它做个非常简单的单页面应用，记录一下。

      顺便说下，好处是，页面改变时不需要刷新，而每个页面都展现不同的数据。尤其在使用模板页的时候，非常方便。

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App，并销售到苹果应用商店中。
 
《HTML开发Mac OS App 视频教程》
 
官方QQ群：（申请加入，说是我推荐的）
  • App实践出真知 434558944       技术分享
  • App学习交流 452180823          技术分享
 

一 示例

  1. 项目结构:

    index.html

    script.js

    ------pages

    ---------home.html

    ---------about.html

    ---------cantact.html

  2. 项目代码

    <1>.index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
< html ng-app="scotchApp">
< head >
< title >Angular Routing Example</ title >
     < link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
     < link rel="stylesheet" href="libs/font-awesome-4.3.0/css/font-awesome.css" />
</ head >
< body ng-controller="mainController">
< header >
< nav class="navbar navbar-default">
< div >
< div >
              < a href="/">Angular Routing Example</a>
                 </ div >
 
                 < ul class="nav navbar-nav navbar-right">
                     < li >< a href="#home"><i class="fa fa-home"></i> Home</a></li>
                     < li >< a href="#about"><i class="fa fa-shield"></i> About</a></li>
                     < li >< a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                 </ ul >
             </ div >
         </ nav >
     </ header >
 
   < div id="main">
         < div ng-view></div>
     </ div >
 
    < script src="libs/angular1.3.15/angular.min.js"></script>
     < script src="libs/jquery2.1.3/jquery.min.js"></script>
     < script src="libs/angular1.3.15/angular-route.min.js"></script>
     < script src="script.js"></script>
</ body >
</ html >

      <2>.script.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var appModule = angular.module(‘scotchApp‘, [‘ngRoute‘]);
 
// configure our routes
appModule.config( function ($routeProvider) {
     $routeProvider
     // route for the home page
         .when( ‘/home‘ , {
             templateUrl :  ‘pages/home.html‘ ,
             controller  :  ‘mainController‘
         })
 
         // route for the about page
         .when( ‘/about‘ , {
             templateUrl :  ‘pages/about.html‘ ,
             controller  :  ‘aboutController‘
         })
 
         // route for the contact page
         .when( ‘/contact‘ , {
             templateUrl :  ‘pages/contact.html‘ ,
             controller  :  ‘contactController‘
         })
 
         .otherwise( ‘/home‘ );
});
 
var mainCtrl = function($scope){
     $scope.message =  ‘Everyone come and see how good I look!‘ ;
}
 
var aboutCtrl = function($scope){
     $scope.message =  ‘Look! I am an about page.‘ ;
}
 
var contactCtrl = function($scope){
     $scope.message =  ‘Contact us! JK. This is just a demo.‘ ;
}
 
 
appModule.controller( ‘mainController‘ , mainCtrl);
appModule.controller( ‘aboutController‘ , aboutCtrl);
appModule.controller( ‘contactController‘ , contactCtrl);

      <3>.运行效果：

技术分享

技术分享

二 遇到的问题：

  1. 出现错误：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

    解决：因为我是以文件的形式打开的，由于chrome 的设置问题，只支持http, data, chrome, chrome-extension, https, chrome-extension-resource 这些格式，不支持file:///xxxx.html 这种格式，所以会出现这个问题。

    方法一：启动chrom 参数   

  2.                     --allow-file-access-from-files

    方法二：启动tomcat，把你的文件全扔到webapps 里，然后在浏览器里访问，就可以了。

 

三 关于移除 url 中的 # 号

1.在config 中，添加：

 $locationProvider.html5Mode(true);

2.在html 中，设置base，比如：

?
1
   < base href="/Xxxxwebapp/">

3.将href 的 # 号去掉，即可。

==》目前存在问题：刷新页面的时候，会出现错误。

原文：http://www.cnblogs.com/RTdo/p/4496294.html

内容总结

以上是互联网集市为您收集整理的利用AngularJS实现一个单页应用全部内容，希望文章能够帮你解决利用AngularJS实现一个单页应用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1204177.html

来源：【匿名】