标签: angular-seed

我是angularJS的新手.我设法使用angularJS构建了一个phonegap应用程序.该应用程序还可以,运行得很好.问题是,现在我对angularJS的工作方式有了更多的了解(至少我认为我有),我担心我的app文件结构和代码可维护性.我的项目遵循角度种子模式.GitHub上的Angular Seed,我有这个结构:

js
   app.js
   controllers.js
   directives.js
   services.js
   filters.js

在研究了如何使用angularJS构建应用程序后,我发现了一些非常好的文章:使用AngularJS构建Huuuuuge应用程序以及如何构建大型角度应用程序

我的问题对我来说似乎很愚蠢,但我无法找到出路.我设法将我的控制器分成不同的文件,现在我有了这个结构:

scripts
    controllers
             LoginCtrl.js
             HomeCtrl.js
             AboutCtrl.js
             ClientCtrl.js 

我正在努力的事情是,在我之前的应用程序的方式,我只有一个controller.js文件.在我的index.html文件中,我通常使用脚本标记加载所有脚本文件.现在我的控制器有4个不同的.js文件,如何将它们加载到我的index.html文件中？我是否必须在那里加载它们？

我在index.html文件中加载所有脚本看起来并不正确(我知道有一个文件代码将以相同的方式加载,对我来说,包含很多脚本标签对我来说很奇怪) .我在github上找到了ng-boilerplate项目,在他们的index.html上,他们动态加载脚本.问题是,我现在无法启动新的ng-bolierplate,我找不到他们是如何做到的.抱歉,长篇文章.谢谢!

安装angular-seed项目后,我执行了以下步骤:

克隆存储库:

git clone https://github.com/angular/angular-seed.git

cd angular-seed

然后我运行了npm install

在安装结束时我得到:

angular-seed@0.0.0 prestart C:\ Users\user\Documents\GitHub\comilion\angular-seed npm install

angular-seed@0.0.0 postinstall C:\ Users\user\Documents\GitHub\myproject\angular-seed bower install

angular-seed@0.0.0 start C:\ Users\user\Documents\GitHub\myproject\angular-seed http-server -a localhost -p 2324

'http-server'不被识别为内部或外部命令,可操作程序或批处理文件.

错误的ERR!angular-seed@0.0.0 start:http-server -a localhost -p 2324 npm ERR!退出状态1 npm ERR!错误的ERR!在angular-seed@0.0.0启动脚本失败.错误的ERR!这很可能是角度种子包的问题,​​npm ERR!不是与npm本身.错误的ERR!告诉作者你的系统失败了:npm ERR!
http-server -a localhost -p 2324 npm ERR!您可以通过以下方式获取他们的信息:npm ERR!npm owner ls angular-seed npm ERR!上面可能有额外的日志记录输出.错误的ERR!系统Windows_NT 6.1.7601 npm ERR!命令"C:\ Program Files文件\ \\的NodeJS node.exe" "C:\ Program Files文件\的NodeJS \node_modules \故宫\ BIN\NPM-cli.js" "开始" NPM ERR!cwd C:\ Users\user\Documents\GitHub\myproject\angular-seed npm ERR!node -v v0.10.22 …

在基于angular-seed项目的项目中,我正在运行单元测试,./scripts/test.sh --log-level debug但是我看到的所有日志消息都不是来自我的应用程序.我怎样才能看到它们？在我的应用程序中,我正在使用$log.

我有一个骨架应用程序构建与mgechev/angular-seed和2muchcoffeecom/ngx-restangular.我想整合它们,但我找不到解决方法如何做到这一点.

在我成功添加几个软件包之前,project.config.ts只需遵循angular-seed文档.

这是一个工作正常的配置:

...
  # tools/config/project.config.ts 

  let additionalPackages: ExtendPackages[];
  additionalPackages = [ {
      name: 'angular2-jwt',
      path: 'node_modules/angular2-jwt',
      packageMeta: {
          defaultExtension: 'js',
      }
  }, {
      name: 'ngx-progressbar',
      path: 'node_modules/ngx-progressbar/bundles/ngx-progressbar.umd.js',
  }, {
      name: 'ng2-charts',
      path: 'node_modules/ng2-charts/bundles/ng2-charts.umd.min.js'
  }, {
      name:'ngx-bootstrap',
      path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'
  }, {
      name:'ngx-bootstrap/*',
      path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'
  }, {
      name:'ng2-select-compat',
      path:'node_modules/ng2-select-compat/bundles/ng2-select-compat.umd.min.js'
  }, {
      name:'ngx-avatar',
      path:'node_modules/ngx-avatar/ngx-avatar.umd.js'
  }];
...

但是当我试图添加ngx-restangular:

...
# tools/config/project.config.ts 

const additionalPackages: ExtendPackages[] = [
    {
        name: 'ngx-restangular',
        path: 'node_modules/ngx-restangular/dist/esm/src/',
        packageMeta: {
            defaultExtension: 'js', …

我刚从github克隆angular2-seed项目并按照步骤进行操作,但是我在VS代码中得到了这个警告[ts]对装饰器的实验支持是一个在将来的版本中可能会发生变化的功能.设置'Exxperimentaldecorators'选项以删除此警告.

我正在尝试将数据存储在我的服务中,类似于以下答案:

在服务中处理$ http响应

app.factory('myService', function($http) {
  var promise;
  var myService = {
    async: function() {
      if ( !promise ) {
        // $http returns a promise, which has a then function, which also returns a promise
        promise = $http.get('test.json').then(function (response) {
          // The then function here is an opportunity to modify the response
          console.log(response);
          // The return value gets picked up by the then in the controller.
          return response.data;
        });
      }
      // Return the promise to the controller
      return promise;
    } …

我正在使用Angular2 Seed应用程序,你可以在官方的回购中找到它.如您所见,这里我们导入了angular2/router,我们正在使用它来创建应用程序的基本路由.

import {Component, ViewEncapsulation} from 'angular2/angular2';
import {
  RouteConfig,
  ROUTER_DIRECTIVES
} from 'angular2/router';
...
@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home' },
  { path: '/about', component: AboutCmp, as: 'About' }
])
export class AppCmp {}

我的问题是:如何配置路由器在我的网址中添加主题标签,使其看起来像:localhost:5555 /#/ about.有没有美丽而简单的方法来制作它？(与之前的$ locationProvider一样)

我知道这很奇怪,但我曾经在网址中喜欢这个标签,而我的apache-config也曾经喜欢它.当然,我可以更改我的httpd.conf文件,非常简单和正确,但我真的想弄清楚,如何简单地添加hashtag,与Angular2路由器.

在测试具有共享服务的简单组件时，出现以下错误消息，我无法使其正常工作，我已经尝试了所有方法！

类型错误：无法读取未定义的属性“订阅”

lr.component.ts

export class LrComponent implements OnDestroy {
  currentRouter: string;
  private subscription: Subscription;

  constructor(private lrService: LrService) {
    this.subscription = this.lrService.lrNavigation$.subscribe(
      (currentNav: string) => {
        this.currentRouter = currentNav;
      },
      (error) => {
        console.warn(error);
      }
    );
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

lr.service.ts

@Injectable()
export class LrService {
  // Observables for our components to subscribe to.
  lrNavigation$: Observable<string>;

  // Subjects to return data to subscribed components
  private lrNavigationSubject = new Subject<string>();

  constructor() {
    this.lrNavigation$ = this.lrNavigationSubject.asObservable();
  } …

我试图从角度站点工作获得基本的示例动画.我复制粘贴代码,但它不起作用.

我下载了angular-animate.js(与我的angular.js文件1.2.15相同的版本)我将它链接到我的代码.我制作了一个animations.css文件并将其链接到我的代码(因为当我点击复选框时没有动画就应用了样式)

比我复制粘贴网站上的代码

这是我的代码index.html:

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/animations.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/login">login</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>
    <!--
  <div>Angular seed app: v<span app-version></span></div>
    -->
  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular/angular-animate.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

的login.html

    <link rel="stylesheet" href="css/login.css"/>

<div id="loginBox">
    <input ng-model="primaryInput" placeholder="Username" type="text" />
    <input ng-model="password"  placeholder="Password" …