angular index.html 页面的<app-root>中如何加载组件及显示

‎我想在页面初始加载时显示angular material的进度, 因此我在index.html中使用了以下代码:

<app-root>
    <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</app-root>

当我这样做时, mat-progress-spinner 没有显示, 但是如果我将mat-progress-spinner 移动到我的 app.component.html 文件, 可以正常显示。如何才能让mat-progress-spinner组件在index.hmtl的app-root标签下显示出来呢?

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
angular-cli.json这个文件在哪?

angular-cli.json这个文件在哪? 我要配置这个文本编辑器 http://www.07net01.com/2017/02/1811011.html

electron-builder 打包angular项目

angular-cli项目,添加了electron模块,用electron-builder去打包,结果报错,说未编译模块 这是执行语句: ``` "ng build --prod --build-optimizer && electron-builder -w" ``` 报错信息: ``` Error: Unresolved node modules: abbrev, are-we-there-yet, aproba, ansi-regex, ajv at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\util\packageDependencies.ts:112:21 From previous event: at Collector.resolveUnresolvedHoisted (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\util\packageDependencies.ts:88:81) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\util\packageDependencies.ts:83:18 at Generator.next (<anonymous>) at runCallback (timers.js:705:18) at tryOnImmediate (timers.js:676:5) at processImmediate (timers.js:658:5) From previous event: at Collector.collect (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\util\packageDependencies.ts:76:28) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\util\packageDependencies.ts:47:44 at Generator.next (<anonymous>) at _getProductionDependencies (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\packageDependencies.js:92:37) at getProductionDependencies (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\packageDependencies.js:83:37) at Lazy.<anonymous> (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:138:24) at Generator.next (<anonymous>) at Lazy.get value [as value] (E:\project\NetWork-Analysis-elec-b\node_modules\lazy-val\src\main.ts:18:25) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\yarn.js:166:90 From previous event: at _getProductionDependencies (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\packageDependencies.js:92:37) at getProductionDependencies (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\packageDependencies.js:83:37) at Lazy.<anonymous> (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:138:24) at Generator.next (<anonymous>) From previous event: at Lazy.get value [as value] (E:\project\NetWork-Analysis-elec-b\node_modules\lazy-val\src\main.ts:18:25) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\yarn.js:166:90 at Generator.next (<anonymous>) From previous event: at _rebuild (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\util\yarn.ts:179:5) at rebuild (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\yarn.js:163:19) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\util\yarn.ts:20:11 at Generator.next (<anonymous>) at runCallback (timers.js:705:18) at tryOnImmediate (timers.js:676:5) at processImmediate (timers.js:658:5) From previous event: at _installOrRebuild (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\yarn.js:71:28) at installOrRebuild (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\out\util\yarn.js:55:28) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:509:13 at Generator.next (<anonymous>) From previous event: at Packager.installAppDependencies (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:470:70) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:420:20 at Generator.next (<anonymous>) From previous event: at Packager.doBuild (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:396:24) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:366:57 at Generator.next (<anonymous>) at E:\project\NetWork-Analysis-elec-b\node_modules\graceful-fs\graceful-fs.js:111:16 at E:\project\NetWork-Analysis-elec-b\node_modules\graceful-fs\graceful-fs.js:45:10 at FSReqWrap.args [as oncomplete] (fs.js:140:20) From previous event: at Packager._build (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:335:133) at E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:331:23 at Generator.next (<anonymous>) at runCallback (timers.js:705:18) at tryOnImmediate (timers.js:676:5) at processImmediate (timers.js:658:5) From previous event: at Packager.build (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\packager.ts:288:14) at build (E:\project\NetWork-Analysis-elec-b\node_modules\app-builder-lib\src\index.ts:59:28) at build (E:\project\NetWork-Analysis-elec-b\node_modules\electron-builder\src\builder.ts:228:10) at then (E:\project\NetWork-Analysis-elec-b\node_modules\electron-builder\src\cli\cli.ts:49:19) ``` 尝试的解决方法,一开始还有两个模块,是jquery和popper.js,后来我通过npm安装后,jquery和popper.js消失了,但其他的还是报错

angular路由 angular-ui-router

angular-ui-router 里的路由定义,.state()哪里怎么导入指定路径的controller代码 大神求助呀

requirejs data-main 只能加载到根路径js

项目中引入requireJS 但是data-main 属性 指定的js 找不到路径 `<script data-main="js/main.js" src="lib/require.js"></script>` 但是,如果把main.js 放到项目根路径就可以找到,而且不管我data-main属性的路径怎么写, requireJS 只找我根路径下面的同名js. main.js require.config({ baseUrl : "/js", paths : { "angular" : "../lib/angular-1.2.4.min", "angular-route" : "../lib/angular-route.min" }}); 目录结构 js main.js lib angluar-1.2.4.min.js angular-route.min.js require.js index.html

angularJS 报错:$http.get is not a function

TypeError: $http.get is not a function at Function.$scope.init (userscore.js:24) at new studentscoreController (userscore.js:37) at Object.e [as invoke] (angular-1.4.4.min.js:39) at $get.Q.instance (angular-1.4.4.min.js:80) at K (angular-1.4.4.min.js:61) at g (angular-1.4.4.min.js:54) at angular-1.4.4.min.js:53 at angular-1.4.4.min.js:20 at n.$get.n.$eval (angular-1.4.4.min.js:133) at n.$get.n.$apply (angular-1.4.4.min.js:133)

angular PrimeNG UI组件报错

我在使用primeng组件的tree时报错下面信息 ![图片说明](https://img-ask.csdn.net/upload/201711/29/1511921248_953851.png) 这是我的代码,不止是p-tree报错,使用其他的组件的时候都是报这样类似的错误,昨天找了一天的bug都没有解决,希望可以有大神帮忙解决一下,谢谢! html ``` <p-tree [value]="files" selectionMode="single" [(selection)]="selectedFile"></p-tree> ``` component.ts ``` import { Component, OnInit, ViewChild } from '@angular/core'; import { Tree, TreeNode, MenuItem, Message, TreeDragDropService } from 'primeng/primeng'; import { NodeService } from './nodeservice'; @Component({ selector: 'app-select-tree', templateUrl: './select-tree.component.html', styleUrls: ['./select-tree.component.css'] }) export class SelectTreeComponent implements OnInit { files: TreeNode[]; selectedFile: TreeNode; constructor(private nodeService: NodeService) {} ngOnInit() { this.nodeService.getFiles().then(files => this.files = files); } } ``` module.ts ``` import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { InputTextModule, ButtonModule } from 'primeng/primeng'; import { TreeModule, TreeNode, SharedModule } from 'primeng/primeng'; import { SelectTreeComponent } from './select-tree.component'; import { NodeService } from './nodeservice'; @NgModule({ imports: [ CommonModule, BrowserModule, FormsModule, HttpModule, BrowserAnimationsModule, InputTextModule, ButtonModule, TreeModule, SharedModule ], declarations: [ SelectTreeComponent ], bootstrap: [ SelectTreeComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ], providers: [ NodeService ] }) export class SelectTreeModule { } ```

ionic angular js 跨域Access-Control-Allow-Origin

``` var myUrl = "http://10.1.20.9:8080/bingo-web/system/listWapOutJson.vhtml?wuLiaoID=40010000040"; $http.get(myUrl).success(function (response) { if(response.success){ console.log("2123"); $scope.chat = response.data; }else { console.log("qweqwe"); } }) ``` 这样写就会出现以下错误, XMLHttpRequest cannot load http://10.1.20.9:8080/bingo-web/system/listWapOutJson.vhtml?wuLiaoID=40010000040. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.40.6:8100' is therefore not allowed access. 求大神,这个问题应该怎么解决呀?

如何使用Angular File Upload(ng-file-upload)将图片上传到后端Laravel / PHP

<div class="post-text" itemprop="text"> <p>I having been trying to wrap my head around ng-file-upload but without much success.</p> <p>I'm trying to upload a picture using <strong>ng-file-upload</strong> to backend PHP/Laravel </p> <p><strong>I have this in my angular controller:</strong></p> <pre><code>$scope.upload = function (file) { Upload.upload({ method: 'POST', url: '/profile/photo/add', file: file, sendFieldsAs: 'form' //fileFormDataName: 'photo' }) .success(function (data, status, headers, config) { dd(data); console.log('file ' + config.file.name + 'uploaded. Response: ' + data); }) .error(function (data, status, headers, config) { dd(data); console.log('error status: ' + status); }) </code></pre> <p><strong>HTML Template for ng file upload:</strong></p> <pre><code>&lt;div ngf-select="upload($file, $event)" ngf-change="upload($file, $event)" ngf-pattern="'image/*'" ngf-capture="capture" ngf-drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ngf-validate="{size: {min: 10, max: '1MB'}, width: {min: 200, max:10000}, height: {min: 200, max: 300}, duration: {min: '10s', max: '5m'}, pattern: 'image/*'}" ngf-keep="false" ngf-allow-dir="true" class="drop-box" ngf-drop-available="dropAvailable"&gt;Select Photo, &lt;span ng-show="dropAvailable"&gt;Drop/Paste Photo&lt;/span&gt; </code></pre> <p></p> <p><strong>I have also created a route/controller in Laravel</strong></p> <pre><code>public function postAdd(PhotoRequest $request) { //Here am just checking if file is valid but it always return false and uploads an unreadable file to /uploads/profile folder if ($request-&gt;file('file')-&gt;isValid() &amp;&amp; $request-&gt;hasFile('file')) { $request-&gt;file('file')-&gt;move(public_path('/uploads/profile/')); return json_encode($request-&gt;file('file')-&gt;isValid()); //returns false }else{ return response()-&gt;json(['file not found']); } } </code></pre> <p><strong>When examined in chrome console, the output looks like this:</strong> <a href="https://i.stack.imgur.com/UHNEW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHNEW.png" alt="enter image description here"></a></p> <p><strong>These unreadable files were uploaded</strong></p> <p><a href="https://i.stack.imgur.com/ocXpa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ocXpa.png" alt="enter image description here"></a></p> <p><strong>What am I doing wrong?</strong></p> </div>

Angular1.X中遇到的问题

![在form表单中,用ng-if时下面的ng-model无效;换成ng-show之后就神奇般的好了。求大神解释!](https://img-ask.csdn.net/upload/201607/12/1468324653_775614.png) 在form表单中,用ng-if时下面的ng-model无效;换成ng-show之后就神奇般的好了。求大神解释!代码见图。

angular2项目打包后项目无法运行

angular2项目开发完之后,可以正常运行,使用ng bulid和ng bulid --prod --aot等命令打包, 检查都通过了,生成dist目录。直接打开dist目录index.html无法正常运行。 ![这是index.html](https://img-ask.csdn.net/upload/201708/24/1503570927_804090.png) ![打开index.html报的错误](https://img-ask.csdn.net/upload/201708/24/1503570871_312520.png) 查看路径,发现它所有文件都到当前盘根目录去寻找,请问这里要如何配置才能使它到当前目录下加载文件?

Angular的ng-show做一个简单的权限控制,方法可执行,但是页面没有展示效果,求解~

``` <li class="treeview" ng-model="agriForm" ng-show="agriForm.show.true"> <a href="#"> <i class="fa fa-folder"></i> <span>农事填报</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="typyId"> <a href="type_manage.html" target="iframe" ><!--ng-show="type.show"--> <i class="fa fa-circle-o"></i> 种类维护 </a> </li> <li id="varietiesId"> <a href="varieties_manage.html" target="iframe" ><!--ng-show="varieties.show"--> <i class="fa fa-circle-o"></i> 品种信息 </a> </li> <li id="adminId"> <a href="main_manage.html" target="iframe" ><!--ng-show="main.show"--> <i class="fa fa-circle-o"></i> 产收成录入 </a> </li> </ul> </li> ``` =========================================================================================== ``` $scope.userInfo={}; $scope.login=function (username,password,check) { if(username && password && check) { userService.login(username, password,check).success( function (response) { if (response.flag) { $scope.userInfo=response.data; $scope.name=$scope.userInfo.name; var roleName = $scope.userInfo.roleName; if(roleName=='农户'){ location.href = "admin/index2.html"; } if(roleName=='区管理员'){ location.href = "admin/index3.html"; } if(roleName=='管理员'){ $scope.agriForm={ show:true }; location.href = "admin/index.html"; } } else { alert(response.errorMsg); } } ) }else{ alert("请输入用户名和密码"); } } ```

如何将授权标头添加到Angular http请求?

<div class="post-text" itemprop="text"> <p>This is my first post.</p> <p>I've just started learning Go and Angular and I'm attempting to connect the angular app to a go api. I've written both and am stuck identifying the root of the problem. I thought it was a CORS problem, but it works fine if I don't include the headers line of code in my Angular http request. At this point I'm just trying to add the header. The authorization code isn't implemented yet.</p> <p>Both apps are running locally with the Go app on port 5000 and Angular on 4200</p> <p>Angular http request that doesn't work:</p> <pre><code>this.http.get&lt;ProjectedBalance&gt;(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')}) .subscribe(data =&gt; { this.projBalance = data.projBalance; } </code></pre> <p>Angular http request that works:</p> <pre><code>this.http.get&lt;ProjectedBalance&gt;(requestUrl) .subscribe(data =&gt; { this.projBalance = data.projBalance; } </code></pre> <p>I'm getting this error: </p> <blockquote> <p>Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:4200" rel="noreferrer">http://localhost:4200</a>' is therefore not allowed access. The response had HTTP status code 403</p> </blockquote> <p>I'm using the gorilla/mux and gorilla/handlers in my go code</p> <pre><code>router := mux.NewRouter() router.HandleFunc("/home/{endDate}", GetProjBalance).Methods("GET", "OPTIONS") headersOk := handlers.AllowedHeaders([]string{"X-Requested-With, Content-Type, Authorization"}) originsOk := handlers.AllowedOrigins([]string{"*"}) methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"}) //start server on port log.Fatal(http.ListenAndServe(":5000", handlers.CORS(originsOk, headersOk, methodsOk)(router))) </code></pre> <p>Headers from Chrome Dev Tools</p> <pre><code>Request URL:http://localhost:5000/home/2020-12-21 Request Method:OPTIONS Status Code:403 Forbidden Remote Address:[::1]:5000 Referrer Policy:no-referrer-when-downgrade Response Headers view source Content-Length:0 Content-Type:text/plain; charset=utf-8 Date:Mon, 20 Nov 2017 21:39:43 GMT Request Headers view source Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:en-US,en;q=0.9,uz;q=0.8 Access-Control-Request-Headers:authorization Access-Control-Request-Method:GET Connection:keep-alive Host:localhost:5000 Origin:http://localhost:4200 </code></pre> </div>

angular项目引用ng-zorro-antd运行时报错

ERROR in node_modules/ng-zorro-antd/empty/nz-embed-empty.component.d.ts(17,17): error TS1110: Type expected. node_modules/ng-zorro-antd/empty/nz-empty.component.d.ts(11,17): error TS1110: Type expected. node_modules/ng-zorro-antd/menu/nz-menu.service.d.ts(10,13): error TS1110: Type expected. node_modules/ng-zorro-antd/menu/nz-menu.service.d.ts(10,90): error TS1005: '(' expected. node_modules/ng-zorro-antd/menu/nz-submenu.component.d.ts(18,23): error TS1110: Type expected. node_modules/ng-zorro-antd/menu/nz-submenu.service.d.ts(9,12): error TS1110: Type expected. node_modules/ng-zorro-antd/menu/nz-submenu.service.d.ts(9,57): error TS1005: '(' expected. node_modules/ng-zorro-antd/menu/nz-submenu.service.d.ts(15,16): error TS1110: Type expected. node_modules/ng-zorro-antd/menu/nz-submenu.service.d.ts(15,50): error TS1005: '(' expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(23,12): error TS1110: Type expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(23,46): error TS1005: '(' expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(26,27): error TS1110: Type expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(26,59): error TS1005: '(' expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(27,19): error TS1110: Type expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(27,49): error TS1005: '(' expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(28,19): error TS1110: Type expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(28,52): error TS1005: '(' expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(37,21): error TS1110: Type expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(40,8): error TS1005: '(' expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(41,13): error TS1110: Type expected. node_modules/ng-zorro-antd/select/nz-select.service.d.ts(41,43): error TS1005: '(' expected. ``` ```

Angular 2前端,Golang后端

<div class="post-text" itemprop="text"> <p>I've got a lot of code in golang that I need to use as services for an Angular2 (Typescript) web app. So I'm trying to use golang as my backend instead of Nodejs. I've followed basically every tutorial out there and none seem to help me.</p> <p>Here's is my mux for golang (I've tried using net/http and now I'm using gorilla/mux):</p> <pre><code>func AngularAnnotations(w http.ResponseWriter, r *http.Request) { file := r.URL.Path[len("/@angular/") : len(r.URL.Path)-1] http.FileServer(http.Dir("frontend/mode_modules/@angular/" + file + "/src/" + file + ".js")) } func main() { r := mux.NewRouter() r.PathPrefix("node_modules/").Handler(http.StripPrefix("node_modules/", http.FileServer(http.Dir("frontend/node_modules")))) r.PathPrefix("/css/").Handler(http.StripPrefix("/css/", http.FileServer(http.Dir("frontend/css")))) r.PathPrefix("css/").Handler(http.StripPrefix("css/", http.FileServer(http.Dir("frontend/css")))) r.PathPrefix("/node_modules/").Handler(http.StripPrefix("/node_modules/", http.FileServer(http.Dir("frontend/node_modules")))) r.PathPrefix("/app/").Handler(http.StripPrefix("/app/", http.FileServer(http.Dir("frontend/app")))) r.PathPrefix("/typings/").Handler(http.StripPrefix("/typings/", http.FileServer(http.Dir("frontend/typings")))) r.PathPrefix("app/").Handler(http.StripPrefix("app/", http.FileServer(http.Dir("frontend/app")))) r.PathPrefix("typings/").Handler(http.StripPrefix("typings/", http.FileServer(http.Dir("frontend/typings")))) r.PathPrefix("/@angular/").HandlerFunc(AngularAnnotations) r.PathPrefix("systemjs.config.js").HandlerFunc(func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./frontend/systemjs.config.js") }) r.PathPrefix("/systemjs.config.js").HandlerFunc(func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./frontend/systemjs.config.js") }) r.HandleFunc("/{_:.*}", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "frontend/index.html") }) http.ListenAndServe(":8000", r) } </code></pre> <p>And here is my index.html:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;'); &lt;/script&gt; &lt;base href="/"&gt; &lt;title&gt;Angular QuickStart&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;script src="css/styles.css" type="text/css"&gt;&lt;/script&gt; &lt;!-- 1. Load libraries --&gt; &lt;!-- Polyfill(s) for older browsers --&gt; &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt; &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt; &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt; &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt; &lt;!-- 2. Configure SystemJS --&gt; &lt;script src="systemjs.config.js"&gt;&lt;/script&gt; &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt; &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt; &lt;script src="node_modules/typescript/lib/typescript.js"&gt;&lt;/script&gt; &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt; &lt;script&gt; System.config({ map: { rxjs: 'node_modules/rxjs' // added this map section, }, transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'app': {defaultExtension: 'ts'},'rxjs': {defaultExtension: 'js'}} }); System.import('app/components/main') .then(null, console.error.bind(console)); &lt;/script&gt; &lt;/head&gt; &lt;!-- 3. Display the application --&gt; &lt;body&gt; &lt;my-app&gt;Loading...&lt;/my-app&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Currently, the structure of my app is:</p> <pre><code>frontend +css +styles.css +node_modules +typings +app +components +models -common.ts (.js, .js.map) -foo.ts (.js, .js.map) -bar.ts (.js, .js.map) +foo-details -foo-details.component.css -foo-details.component.html -foo-details.component.ts (.js, .js.map) +foo-sections -foo-sections.component.css -foo-sections.component.html -foo-sections.component.ts (.js, .js.map) +foo-section-details -foo-section-details.component.css -foo-section-details.component.html -foo-section-details.component.ts (.js, .js.map) +bar-details -etc +bar-sections -etc +bar-section-details -etc -app.component.css -app.component.ts (.js, .js.map) -app.module.ts (.js, .js.map) -main.ts (.js, .js.map) +services -golang.service.ts (.js, .js.map) -in-memory-data.service.ts (.js, .js.map) -foo-search.service.ts (.js, .js.map) -foo-sections.service.ts (.js, .js.map) -foo.service.ts (.js, .js.map) -bar-sections.service.ts (.js, .js.map) -bar.service.ts (.js, .js.map) -app.routing.ts (.js, .js.map) -rxjs-extensions.ts (.js, .js.map) -index.html -package.json -systemjs.config.js -tsconfig.json -typings.json +controllers (golang) +models (golang) +routers (golang) -main.go </code></pre> <p>When I run this in chrome, I get an error on the transpiled version of my app.component.ts. </p> <pre><code>TypeError: core_1.Component is not a function </code></pre> <p>I've tried using webpack as my bundler, but it's having problems as well. </p> <p>I've been banging my head against this for too bloody long, and I could use any help you can give me.</p> <p>Thanks!</p> </div>

angular 路由 a 标签 href 页面跳转 异常问题

最近新学习AngularJs,对于路由配置刚刚起步,遇到一个很迷的问题。 主页面代码如下 ``` <!DOCTYPE html> <html ng-app="index"> <head> <meta charset="utf-8" /> <title>imooc-angular</title> <script src="js/angular-1.6.4/angular.js"></script> <script src="js/angular-1.6.4/angular-route.js"></script> <script src="js/angular-1.6.4/angular-animate.js"></script> <script src="js/index.js"></script> <script src="js/controllers.js"></script> <script src="js/directives.js"></script> <script src="js/filters.js"></script> <script src="js/routes.js"></script> <script src="js/services.js"></script> </head> <body> <a href="#/hello">hello</a> <a href="#/list">list</a> <div ng-view></div> </body> </html> ``` 零件页面代码如下 hello.html ``` <div><span ng-bind="hello"></span>,angular</div> ``` list.html ``` <ul> <li ng-repeat="book in books"> 书名:{{book.title}}&nbsp;&nbsp;&nbsp;作者:{{book.author}} </li> </ul> ``` 各js代码如下,其中filter,routes,services,directives 为只声明了模块的空js index.js ``` var index = angular.module("index",[ 'ngRoute','ngAnimate','indexControllers','indexServices','indexDirectives', 'indexRoutes','indexFilters' ]); index.config(function($routeProvider){ $routeProvider.when('/hello',{ templateUrl:'templates/hello.html', controller:'HelloCtrl' }).when('/list',{ templateUrl:'templates/list.html', controller:'ListCtrl' }).otherwise({ redirectTo:'/hello' }) }); ``` controllers.js ``` var controllers = angular.module("indexControllers",[]); controllers.controller("HelloCtrl",['$scope',function($scope){ $scope.hello = "hello"; }]); controllers.controller("ListCtrl",['$scope',function($scope){ $scope.books=[ {title:"book1",author:"author1"}, {title:"book2",author:"author2"}, {title:"book3",author:"author3"} ] }]); ``` 问题一,直接访问index页面,游览器link为:http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello 为什么地址是#!/hello 问题二,通过A标签互相跳转时不生效,点击跳转后新link为: http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello#%2Flist 或者 http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello#%2Fhello 为什么地址中会有乱码 问题三,在修改A标签,将href="#/hello",hrel="#/list"修改成href="#!/hello",href="#!/list"后,成功跳转 为什么一定要加上这个“!”符号才能成功跳转,是什么样的原理,希望有高手能详细解答

anjularjs - ng-template加载不显示

index.html ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例 - 菜鸟教程</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script> <script src="app.js"></script> </head> <body ng-app="ngRouteExample" class="ng-scope"> <div> <div id="navigation"> <a href="#!/home">Home</a> <a href="#!/about">About</a> </div> <div ng-view=""> </div> </div> </body> </html> ``` app.js ``` angular.module('ngRouteExample', ['ngRoute']) .controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) .controller('AboutController', function ($scope, $route) { $scope.$route = $route;}) .config(function ($routeProvider) { $routeProvider. when('/home', { templateUrl: 'home.html', controller: 'HomeController' }). when('/about', { templateUrl: 'about.html', controller: 'AboutController' }). otherwise({ redirectTo: '/home' }); }); ``` home.html ``` <script type="text/ng-template" id="home.html"> <h1> Home </h1> </script> ``` about.html ``` <script type="text/ng-template" id="about.html"> <h1> About </h1> </script> ``` 加载之后显示如下 ====================================================== ``` <html><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style> <meta charset="utf-8"> <title>AngularJS 路由实例 - 菜鸟教程</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script> <script src="app.js"></script> </head> <body ng-app="ngRouteExample" class="ng-scope"> <div> <div id="navigation"> <a href="#!/home">Home</a> <a href="#!/about">About</a> </div> <div ng-view="" class="ng-scope"><script type="text/ng-template" id="about.html" class="ng-scope"> <h1> About </h1> </script></div><!-- ngView: --> </div> </body></html> ``` 多了script这一层标签,在home和about之间来回多点击几次,又能显示正常。

如何使用Golang在非根路径上提供index.html

<div class="post-text" itemprop="text"> <p>I want to serve my angular app <code>index.html</code> under <code>localhost:3000/mypath/</code> is there a way to accomplish that?</p> <pre><code>package main import ( "net/http" ) func main() { // This works http.Handle("/", http.FileServer(http.Dir("./my-project/dist/"))) // This doesn't work, you get 404 page not found http.Handle("/mypath/", http.FileServer(http.Dir("./my-project/dist/"))) http.ListenAndServe(":3000", nil) } </code></pre> </div>

如何在许多页面上使用ng-app和ng-controller?

<div class="post-text" itemprop="text"> <p>I'm stuck in CRUD Operations in AngularJS.</p> <ol> <li><code>index.html</code>. on this page on body I am using <code>ng-app</code> and <code>ng-controller</code>.</li> <li><code>offer_letter_dashboard.php</code> and </li> <li><code>termination_dashboard.php</code> on this page I am writing script for adding and fetching data.</li> </ol> <p>I am using the same script on both the pages for fetching data. Here is the script:</p> <pre><code>&lt;script&gt; var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http){ $http.get("http://www.adhr.adnacgroup.com/ADHRM/companyJson.php") .then(function(response){ $scope.names = $scope.names = response.data.service; }); getInfo(); function getInfo(){ $http.post('gettermination.php').success(function(data){ $scope.details = data; }) } }); &lt;/script&gt; </code></pre> <p>Right now only the first page can retrieve data. Only the first page's script is working fine. And it applies for termination's page too.</p> </div>

angularjs ng=bind-html报错问题

1.angularjs 前台html代码: <div class="weui-cell__ft" ng-bind-html="items[0].ZLTITLE{{$index}}" style="color: blue; height: 55px;"></div> js中代码如下: var app = angular.module('ngappnews', ["businessquery"]); app.controller("ngControllernews", function ($scope,$sce, $http, businessUtilService, sessions) { $scope.init = function () { var data = { "applySrc": applySrc, "aac002":$scope.idNumber, "aac003":$scope.name, "type":"1" } var headers = { "Authorization": $scope.token } businessUtilService.init(data, headers).then(function (response) { // alert(JSON.stringify(response.data)); if (response.data == undefined) { $scope.isEmpty = true; } else { if (response.data.length > 0) { debugger var dataresult = response.data; //暂定 var maxnum=response.data[0].rowNum; //行号 var array=new Array(); for(var i=0;i<maxnum;i++){ // var labelname="ZLCODE"+i; var ids="ZLTITLE"+i; array[i]=i; dataresult[0][ids]=$sce.trustAsHtml(dataresult[0][ids] ); } $scope.items=dataresult; $scope.arrays=array; //生成数组 $scope.isEmpty = false; // $scope.$apply(); } else { $scope.isEmpty = true; $(".itemlists").hide(); // $scope.$apply(); } } }) } 错误信息: Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=17&p3=items%5B0%5D.ZLTITLE%7B%7B%24index%7D%7D&p4=%7B%7B%24index%7D%7D at http://localhost:63342/nanning/html/lib/js/angular.min.js:6:412 at s.throwError (http://localhost:63342/nanning/html/lib/js/angular.min.js:230:78) at s.ast (http://localhost:63342/nanning/html/lib/js/angular.min.js:221:442) at td.compile (http://localhost:63342/nanning/html/lib/js/angular.min.js:231:329) at kc.parse (http://localhost:63342/nanning/html/lib/js/angular.min.js:260:95) at g (http://localhost:63342/nanning/html/lib/js/angular.min.js:125:383) at Object.compile (http://localhost:63342/nanning/html/lib/js/angular.min.js:274:333) at oa (http://localhost:63342/nanning/html/lib/js/angular.min.js:71:38) at s (http://localhost:63342/nanning/html/lib/js/angular.min.js:59:121) at s (http://localhost:63342/nanning/html/lib/js/angular.min.js:59:253) <div class="weui-cell__ft" ng-bind-html="items[0].ZLTITLE{{$index}}" style="color: blue; height: 55px;"> OK 说明:后台的数据是通过webservice返回的json串,如果存在多条数据的时候,返回的数据是放到一个大对象里,结构如code0,code1,这种的 麻烦大家帮忙看下。

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

String s = new String(" a ") 到底产生几个对象?

老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才! 上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有了”宜春”对象,如果没有则在常量池中创建一个此字符串对象,然后堆中再创建一个常量池中此”宜春”对象的拷贝对象。 也就是说准确答案是产生了一个或两个对象,如果常量池中原来没有 ”宜春” ,就是两个。...

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

Linux面试题(2020最新版)

文章目录Linux 概述什么是LinuxUnix和Linux有什么区别?什么是 Linux 内核?Linux的基本组件是什么?Linux 的体系结构BASH和DOS之间的基本区别是什么?Linux 开机启动过程?Linux系统缺省的运行级别?Linux 使用的进程间通信方式?Linux 有哪些系统日志文件?Linux系统安装多个桌面环境有帮助吗?什么是交换空间?什么是root帐户什么是LILO?什...

Linux命令学习神器!命令看不懂直接给你解释!

大家都知道,Linux 系统有非常多的命令,而且每个命令又有非常多的用法,想要全部记住所有命令的所有用法,恐怕是一件不可能完成的任务。 一般情况下,我们学习一个命令时,要么直接百度去搜索它的用法,要么就直接用 man 命令去查看守冗长的帮助手册。这两个都可以实现我们的目标,但有没有更简便的方式呢? 答案是必须有的!今天给大家推荐一款有趣而实用学习神器 — kmdr,让你解锁 Linux 学习新姿势...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

史上最全的 python 基础知识汇总篇,没有比这再全面的了,建议收藏

网友们有福了,小编终于把基础篇的内容全部涉略了一遍,这是一篇关于基础知识的汇总的文章,请朋友们收下,不用客气,不过文章篇幅肯能会有点长,耐心阅读吧爬虫(七十)多进程multiproces...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

85后蒋凡:28岁实现财务自由、34岁成为阿里万亿电商帝国双掌门,他的人生底层逻辑是什么?...

蒋凡是何许人也? 2017年12月27日,在入职4年时间里,蒋凡开挂般坐上了淘宝总裁位置。 为此,时任阿里CEO张勇在任命书中力赞: 蒋凡加入阿里,始终保持创业者的冲劲,有敏锐的...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

新一代神器STM32CubeMonitor介绍、下载、安装和使用教程

关注、星标公众号,不错过精彩内容作者:黄工公众号:strongerHuang最近ST官网悄悄新上线了一款比较强大的工具:STM32CubeMonitor V1.0.0。经过我研究和使用之...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

大学一路走来,学习互联网全靠这几个网站,最终拿下了一把offer

大佬原来都是这样炼成的

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

什么时候跳槽,为什么离职,你想好了么?

都是出来打工的,多为自己着想

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

你期望月薪4万,出门右拐,不送,这几个点,你也就是个初级的水平

先来看几个问题通过注解的方式注入依赖对象,介绍一下你知道的几种方式@Autowired和@Resource有何区别说一下@Autowired查找候选者的...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

立即提问
相关内容推荐