除了ng-view页面加载

Question

I am using a master page having navigation and ng-view on it, partial pages loading successfully under ng-view and with navigation of master page , but I require to load some isolated page like login.html page but not under ng-view and without master page content during route.

I am new on angular and not sure how to do this, login page loaded every time under ng-view.

Please suggest me any way to do this.

Thanks in advanced.

Answer 1

ng-include is your friend. see doc

here is simple way, but you should go to doc and see that there are extra options as to what can be done onload and if you want to autoscroll or do some kind of animation.

<div ng-include="'somefile.html'">
</div>

The one extra note is that ng-include is given an expression so if you have a static reference you need the extra quotes.

Answer 2

One of the great things about Angular is it is very flexible. Ultimately it will depend on your app and how you work. I'm not exactly certain what you are trying to accomplish but, it sounds like a job for the ngInclude directive as Dan mentioned .

You mention a login.html that excludes navigational and other main page content. Using a modal may be a viable alternative interface decision.

If you have everything built and you only want to hide part of the DOM and be done with it then, nghide or ngShow may be the quickest solution.

If there is a lot of stuff on your index.html you may want to separate those things into partials other than the ones connected directly to your routes, and use ng-include="'path/to/partial.html'" to include them. (The "''" are intentional as it likes a string.) Read the docs and experiment with the plunkr . You can do a lot of cool things with ngInclude, especially if you pay attention to its context.

If you combine the ngInclude directive with ng-switch-when, you could put together something like:

<div ng-switch="routeAction">
    <div ng-switch-when="extpage" ng-include="'extraneous.content.html'"></div>
    <div ng-switch-when="login" ng-include="'login.partial.html'"></div>
    <div ng-switch-default ng-include="'default.tpl.html'"></div>
</div>

Where routeAction is tied to your controler which, is tied to your $route or $location.. depending on how you have things set up.