ngRoute

Componentes

  • Diretivas
    • ngView
  • Provedores
    • $routeProvider
  • Serviços
    • $route
    • $routeParams

ngView

<ng-view [onload=""] [autoscroll=""]>
</ng-view>


//----------------------


<span ng-view [onload=""] [autoscroll=""]>
</span>


//----------------------


<div class="[onload: ;] [autoscroll: ;]">
</div>

Configurando minhas rotas/uris

angular.module('Demo').config(function ($routeProvider) {
    $routeProvider.when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
});

Super facil

<!doctype html>
<html>
<header> <title>Demo</title></header>
<body>
<nav><ul>
        <li> <a ng-href='#'>Inicio</a> </li>
        <li> <a ng-href='#/about'>About</a></li>
    </ul>
</nav>
<div class="container" ng-view></div>

<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/about.js"></script>

$routeProvider

.when( <path:String>, ...);

angular.module('ngRouteExample', ['ngRoute']);

angular.module('ngRouteExample').config(function($routeProvider) {
        $routeProvider
            .when('/va_para_casa', ... )
            .when('/livros/:idLivro/edit', ... )
            .when('/livros/:nomelivro*\/edit', ... })
            .otherwise('/va_para_casa');
    });

http://ascp.ninja/livros/1212454325/edit

$routeParams.idLivro

http://ascp.ninja/livros/meu/livro/tem/barra/no/titulo/edit

$routeParams.nomelivro

$routeProvider

.when( <path:String>, <route:Object>);

{

controller: { String | function ()= },

controllerAs: { String },

template: { String= | function()= },

templateUrl: { String= | function>= },

resolve: { Object.<string, function>= },

redirectTo: { ( String | function() )= },

[reloadOnSearch=true],

[caseInsensitiveMatch=false]

};

Aplicacao basica de gerenciamento de vendas e clientes

<!doctype html>
<html>
<header> <title>Demo</title></header>
<body>
<nav><ul>
        <li> <a ng-href='#'>Inicio</a> </li>
        <li> <a ng-href='#/about'>About</a></li>
    </ul>
</nav>
<div class="container" ng-view></div>

<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/about.js"></script>

RequireJS =)

Estrutura

(Inicial)

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="styles/main.css">

    <script src="/bower_components/requirejs/require.js" data-main="/scripts/main">
    </script>

  </head>
  <body>

    <!-- Add your site or application content here -->
    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a ng-href="#">Home</a></li>
          <li><a ng-href="#/about">About</a></li>
          <li><a ng-href="#">Contact</a></li>
        </ul>
        <h3 class="text-muted">Lazy Load com angularAMD</h3>
      </div>

      <div ng-view=""></div>

      <div class="footer">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>


    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->


    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <!-- endbuild -->
</body>
</html>

index.html

require.config({
    baseURL: 'scripts',
    paths: {
        'angular': '/bower_components/angular/angular',
        'angular-route': '/bower_components/angular-route/angular-route',
        'angularAMD': '/bower_components/angularAMD/angularAMD'
    },
    shim: {
        'angularAMD': ['angular'], 'angular-route': ['angular']
    },
    deps: ['app']
});

scripts/main.js

define([
    'angularAMD',
    'angular-route'
], function (angularAMD) {
    'use strict';
    var expMod = angular.module('expModule', ['ngRoute']);

    expMod.config(function ($routeProvider) {
        $routeProvider.when('/', angularAMD.route({
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            controllerUrl: 'controllers/main'
        }));

        $routeProvider.when('/about', angularAMD.route({
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl',
            controllerUrl: 'controllers/about'
        }));
    });

    return angularAMD.bootstrap(expMod);
});

app.js

Lazy Load

define([
    'app',
    'myService',
    'myFactory'
], function (app) {
        app.controller('MainCtrl', function ($scope) {
            $scope.awesomeThings = [
                'HTML5 Boilerplate',
                'AngularJS',
                'Karma'
            ];
        });
    });

Angular ngRoute

By Bruce Carvalho

Made with Slides.com

Angular ngRoute

Trabalhando com ngRoute

  • 1,223

More from Bruce Carvalho