Angularjs - 一般结构（路线角度）

时间：2016-04-02 19:06:17

标签： angularjs

我是角色新手，希望以角度

进行下一个网站

这将是主要结构：

enter image description here

  • snippet1始终是固定的
  • snippet3是动态部分

如果我点击了snippet2的link1或link2，则加载将在snippet3（）中。

现在我揭露了我的疑问：

如果我点击了snippet1的图标，那么加载网页就会在snippet4中。

喜欢图片：

enter image description here

错误，当我尝试安装“express cors”时：

enter image description here

怎么可能呢？

2 个答案:

答案 0 :(得分：1)

先决条件：

  • Node.js的

步骤1：设置新项目目录

  • app.js
  • css（文件夹）
    • 的main.css
    • snip3.css
    • snip4.css
  • ctrl（文件夹）
    • snip3Ctrl.js
    • snip4Ctrl.js
  • 的index.html
  • nodeServer.js
  • partials（文件夹）
    • snip3.html
    • snip4.html

步骤2：安装npm软件包

从项目目录中，运行：

npm install express cors

步骤3：复制并粘贴代码

app.js 

var 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：运行节点服务器

从项目目录中，运行：

node nodeServer.js

完成！

默认情况下，它会将您的页面提供给localhost：8080。如果我忘了什么，发表评论，我会尝试更新答案。

答案 1 :(得分：0)

尝试使用ui-router作为路由。 在主index.html中，添加标题导航栏，让链接操纵应用程序的状态。

<body ng-controller="AppController">
  <header>
    <a ui-sref="Snippet4"></a>
  </header>
  <div ui-view></div>
</body>

这是html的起点。

相关问题
最新问题