Angularjs - 一般结构（路径角） [英] Angularjs - General structure (route angular)
问题描述
我在新的角度，希望做下一个网站在角
I am new in angular, want to do the next web site in angular
这将是主要结构：
![在这里输入的形象描述](\"http://i.stack.imgur.com/GDRTT.png\")
- 的snippet1始终固定
- 的snippet3是动态部分
如果我在LINK1或snippet2的LINK2点击，负载将在snippet3（）。
If i click in the link1 or link2 of the snippet2,load would be in the snippet3 ().
现在我暴露我的疑问：
如果我在图标点击snippet1，负载网页将是snippet4。
If i click in icons the snippet1, the load web page would be in snippet4.
像图片：
![在这里输入的形象描述](\"http://i.stack.imgur.com/87ofo.png\")
错误，当我尝试安装EX preSS CORS
Error, when i try install "express cors":
![在这里输入的形象描述](\"http://i.stack.imgur.com/G95em.png\")
怎么能这样做呢？
推荐答案
- 的Node.js
- app.js
- CSS（文件夹）
- 的main.css
- snip3.css
- snip4.css
- snip3Ctrl.js
- snip4Ctrl.js
- snip3.html
- snip4.html
从您的项目目录，运行：
From your project directory, run:
NPM安装前preSS CORSvar app = angular.module('app', ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'partials/snip3.html', controller: 'snip3Ctrl' }) .when('/snip3', { templateUrl: 'partials/snip3.html', controller: 'snip3Ctrl' }) .when('/snip4', { templateUrl: 'partials/snip4.html', controller: 'snip4Ctrl' }) .otherwise({ template: '<h1>Not Found</h1>' }); }); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; }]);的index.html
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Angular Routing Demo</title> <script>document.write('<base href="' + document.location + '" />');</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"> <script src="http://code.angularjs.org/1.5.0/angular.js"></script> <script src="http://code.angularjs.org/1.5.0/angular-route.js"></script> <script src="app.js"></script> <link rel="stylesheet" href="css/main.css" /> <script src="ctrl/snip3Ctrl.js"></script> <link rel="stylesheet" href="css/snip3.css" /> <script src="ctrl/snip4Ctrl.js"></script> <link rel="stylesheet" href="css/snip4.css" /> </head> <body> <div class="container" style="height: 100%;"> <nav id="navbar" class="navbar navbar-responsive"> <!-- snippet #1 here --> </nav> <div style="height: 200px;"></div> <ng-view></ng-view> </div> </body> </html>nodeServer.js
var express = require('express'), cors = require('cors'), app = express(); app.use(cors()); app.use("/", express.static(__dirname)); app.listen(8080, function(){ console.log('CORS-enabled web server listening on port', 8080); });snip3Ctrl.js
angular.module('app').controller('snip3Ctrl', function($scope, $http) { });snip4Ctrl.js
angular.module('app').controller('snip4Ctrl', function($scope, $http) { });步骤4：运行节点服务器
从您的项目目录，运行：
Step #4: Run the node server
From your project directory, run:
节点nodeServer.js这将有助于你的页面为localhost：8080默认情况下。万一我忘了什么，发表评论，我会尝试更新了答案。
It will serve your page to localhost:8080 by default. In case I forgot anything, post a comment and I will try to update the answer.
这篇关于Angularjs - 一般结构（路径角）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
