How to make a layout template with Angularjs?

Asked

Viewed 1,395 times

6

need a standard template for all screens of my front-end application how do I do this with angular-js? have as?

css html5 angularjs

  • Not understood, could be more specific? What would be a layout template and how it should work?

  • i have a page where I will create the layout only once, and the other pages will inherit the layout of this page understand? @Emirmarques

  • Right, but you will change something in this layout or only the controller will be changed?

  • In the layout I will not change anything only when there are layout adjustments , no interaction will be done on it , only in the pages that inherited from him @Emirmarques

1 answer

10


There’s like @Jose. Just use the $routeProvider. Example:

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

});

Dai on your page (index.html) you put a ng-view in the 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>
      <script src="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 page index.html can become your default template, and Voce will call all other pages within it.

  • 1

    Thanks for the return :)

  • For nothing, if you have any difficulty to implement this solution just comment here that I help you understand better.

Browser other questions tagged css html5 angularjs

You are not signed in. Login or sign up in order to post.