您的位置：首页 > Web前端 > Node.js

angularJS 结合nodejs实现单页面开发

2016-03-24 09:48 741 查看
main.html
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="UTF-8">
<title>BackStage Practice</title>

<link rel="stylesheet" href="./css/normalize.css"><!--导入normalize 统一浏览器默认样式-->
<link rel="stylesheet" href="./css/bootstrap.min.css"><!--导入bootstrap-->
<link rel="stylesheet" href="./css/mainStyle.css">

<script src="js/angular.min.js"></script><!--导入anjularjs-->
<script src="js/angular-ui-router.min.js"></script> <!--导入angular的路由器(不是anjular自身的路由)-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/main.js"></script>
<script src="module/index/indexJS.js"></script>
</head>
<body ng-controller="mainController">

<header class="col-md-12">
<h1>This is a Header</h1>
</header>

<div ui-view></div>


此处是系统的主体架构

ng-app="mainApp" 是定义整个系统的主模块

导入需要用到的文件

ng-controller = "mainController"定义了main.htm的控制器

ui-view 是容纳 跳转页面的区域 这里必须要在引入angular的路由文件(这里用的不是angular自身的路由) <script src="js/angular-ui-router.min.js"></script> <!--导入angular的路由器(不是anjular自身的路由)-->

main.js

var mainApp = angular.module("mainApp",["ui.router","indexApp"]);
mainApp.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.when("", "/index");
$stateProvider.state("index", {
url: "/index",
templateUrl: "/module/index/index.html",
controller: "IndexController"
});

});

//main 的控制器
mainApp.controller("mainController",function($rootScope,$scope){

});


下面是子页面的配置

index.html

<div ng-controller="IndexController">
This is a index Page
</div>


indexJS.js

var indexApp = angular.module("indexApp",[]);
indexApp.controller("IndexController",function($scope,$http){
console.log("Successfully enter the indexAPP----------------------------IndexApp");

});

页面跳转的时候  注意路径 href="#/index"


<header class="col-md-12">
<h1>This is a Header</h1>
<a href="#/index" class="btn btn-primary">Index</a>
<a href="#/login" class="btn btn-primary">Login</a>
<a href="#/register" class="btn btn-primary">Register</a>
</header>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                angularjs
                                                nodejs
                                                web
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航