Loading partial views in angular controller into empty document

Question

Given an empty document with just the bare essentials, loading js files and stylesheet:

<!doctype html>
<html ng-app="labApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="/static/lab.js"></script>
    <link rel="stylesheet" href="/static/local.css" />
    <link rel="stylesheet" href="/static/superhero.min.css" />
  </head>
  <body ng-controller="labController">
  </body>
</html>

And an empty controller in lab.js:

angular.module('labApp', [])
  .controller('labController', function() {
    var lab = this;
  });

How do I go about loading a partial view into the body? Am I supposed to do things like that manually, using jQuery, or is there some hidden facility in angular to load partials?

You might want to consider using ui-router: github.com/angular-ui/ui-router — Michelangelo
– Michelangelo, Commented Sep 29, 2015 at 18:34
Ah, yes, that seems like the missing cog.. Please add an answer so I can accept it ^_^ — Morten Nilsen
– Morten Nilsen, Commented Sep 29, 2015 at 18:49

Michelangelo · Accepted Answer · 2015-10-20 14:55:55Z

0

You can do this by rendering different views with ui-router: https://github.com/angular-ui/ui-router

When loaded into your application, you can include it like this in

angular.module('app', [ui.router])

When you follow the documentation it is pretty easy to setup different routes. Good luck!

answered Oct 20, 2015 at 14:55

Michelangelo

5,9785 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading partial views in angular controller into empty document

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related