How to make a layout template with angularjs?

6

I need a default template for all screens in my front-end application, how do I do this with angular-js? How are you?

    
asked by Jose Vieira Neto 22.09.2015 в 14:37

1 answer

10

It's like @Jose. Just use $routeProvider . Example:

$routeProvider.when("/home", {
        templateUrl: "public/view/home.html",
        controller: "principalCtrl"

});

On your page ( index.html ) you put ng-view into body Example:

<html ng-app="exemplo">
   <head>
      <meta charset="utf-8">
      <title>Login</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="public/libs/bootstrap/dist/css/bootstrap.css"/>
      <link rel="stylesheet" href="public/libs/bootstrap/dist/js/bootstrap.js"/>
      <link rel="stylesheet" href="public/styles/style.css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script src="public/libs/angular/angular.js"></script>
      <script src="public/libs/angular-route/angular-route.js"></script>
      <script src="public/libs/angular/angular-locale_pt-br.js"></script>
      <script src="public/libs/angular/angular-messages.js"></script>
      <script src="public/libs/angular/angular-flash.min.js"></script>
      <script src="public/libs/angular-animate/angular-animate.js"></script>

      <script src="public/js/app.js"></script>
      <script src="public/js/controller/loginController.js"></script>
       <script src="public/js/controller/modalController.js"></script>
      <script src="public/js/config/routeConfig.js"></script>

      <script src="public/js/services/loginAPIService.js"></script> 
      <script src="public/js/value/configValue.js"></script>  


   </head>
   <body>
      <div ng-view></div>
   </body>
   <html>

In short, this index.html page may become your default template, and you will call all other pages within it.

    
22.09.2015 / 14:47