I am trying to learn angular with a book and some examples, and I have some difficult times trying to understand how the ng-view knows the view to display based on the routing system.
So here is an example:
<!DOCTYPE html>
<html ng-app="maintenance">
<head>
<title>Dive Sites</title>
<link href="./lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="./site.css" rel="stylesheet" />
</head>
<body ng-controller="adminCtrl">
<!-- Navigation header -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#adminMenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Younderwater Admin
</a>
<div class="collapse navbar-collapse" id="adminMenu">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('Locations')}">
Locations
</li>
<li ng-class="{active: isActive('Sites')}">
<a href="#/sites">
Dive Sites
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional title bar -->
<div class="current-spot">
<div class="container-fluid" >
<div class="container">
<div ng-show="view=='locations'">
<h3>Manage the list of diving locations</h3>
</div>
<div ng-show="view=='diveSites'">
<h3>Manage the list of dive sites</h3>
</div>
</div>
</div>
</div>
<!-- View content -->
<div class="main-content">
<div class="container-fluid">
<div class="container">
<div ng-view></div>
</div>
</div>
</div>
<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/bootstrap.min.js"></script>
<script src="./lib/angular/angular.min.js"></script>
<script src="./lib/angular/angular-route.min.js"></script>
<script src="maintenance.js"></script>
</body>
</html>
SCRIPT
angular.module('maintenance', ['ngRoute'])
.controller('adminCtrl', AdminCtrl)
.config(function ($routeProvider) {
$routeProvider.when('/locations', {
templateUrl: 'views/locations.html'
});
$routeProvider.when('/sites', {
templateUrl: 'views/sites.html'
});
$routeProvider.otherwise({
templateUrl: 'views/main.html'
});
});
function AdminCtrl($scope) {
}
I need to know if I have the correct way of thinking, watching this example, I would say that the '#' says to use the routing system, in the script we set the routes and the views the app should load based on the url, when I press the because of the # it search based on the routing system and passes the view to the ng-view, I don't know if the processing is correctly thats why I need to understand better how it works, sorry if I don't explained very well :/
Ps: sorry for my bad english
First and foremost, and angular.module('maintenance', ....) must match. I'm referring to the identifier 'maintenance'. Without this, your JS file won't find your HTML file.
From the JS file, you have angular.module('maintenance', ['ngRoute']), ngRoute is an angular directive for routing.
https://docs.angularjs.org/api/ngRoute
The $routeProvider says what page to go to.
http://www.w3schools.com/angular/angular_routing.asp
And templateUrl shows the URL for the page.
https://docs.angularjs.org/guide/directive
http://techfunda.com/howto/505/function-with-templateurl
I'm very sure you have the following html files in your project.
locations.html
sites.html
main.html
Related
I am working on a Laravel project implementing React for the front end.
I've set up a couple of routes and have created two blade files for both the dashboard and a clients list page.
However, after consideration I feel that maybe a single blade file with a header and footer and just a #content div in the middle would be more efficient.
I cannot see how to specific which blade file for the route. At first, I thought I was specifying it using the name() function on the Route but I am wrong. Here are my routes in my web.php file:
Auth::routes();
Route::get('/', 'HomeController#index')->name('home');
Route::get('/clients', 'ClientController#index')->name('clients');
And I created two blade files:
home.blade.php
clients.blade.php
Which basically contain:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
<div id="content"></div>
</div>
</div>
</div>
</div>
</div>
#endsection
Except in the clients template I have the title 'Clients' not 'Dashboard'.
This is the app.blade.php which each template extends:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Reserve Shark') }}</title>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Reserve Shark') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
However, when I changed the client route's name to 'home' (thinking it would use the home blade file) it didn't change. So, for the purpose of testing, I changed it to 'blah' which didn't change anything. I even changed the route itself to client-page and the same in my app.js file:
render((
<Router history={browserHistory}>
<Route path="/" component={Example} />
<Route path="/client-page" component={Client} />
</Router>
), document.getElementById('content')
);
Yet there is no change.
When I changed my clients.blade.php file to clients2.blade.php I got an error stating that clients.blade.php didn't exist.
So my question is: where on earth is Laravel stipulating that this page uses THAT blade file?
Is it possible to somehow change it so every route uses the same file and the only difference is the data that's injected into the #content div?
In your controller (e.g. ClientController), within the index method, there should either be a view(...) helper method or a View::make(...) static method.
Change the value to change the blade template used.
When you use the ->name('home') attach to your route, you just specifie the name of the route by default Laravel will name your route as home.route, and this is just to help you remember the name of your route when you whan to return same URL instead of writing the URL manualy you can use the route() helper
To specifie the blade template which you want to render you must put in you index method of you HomeController
class HomeController extends Controller
{
public function index()
{
/* here goes all other code */
return View::make('home'); // Laravel will render your home.blade.php file
}
}
class ClientController extends Controller
{
public function index()
{
/* here goes all other code */
return View::make('clients'); // Laravel will render your clients.blade.php file
}
}
don't forget to use the Illuminate\Supports\Facades\View
The pages aren't loading in my ng-view. All the clicked links come up as just blank. What am I doing wrong? I think I have all my routes put correctly. Thanks in advance.
index.html
<!DOCTYPE html>
<html ng-app="soolApp">
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hi. I'm Dan Karlin.</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-folder-open"></i> Example 1</li>
<li><i class="fa fa-folder-open"></i> Example 2</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
script.js
var soolApp = angular.module('soolApp', ['ngRoute']);
soolApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/promo', {
templateUrl : 'pages/promo.html',
controller : 'promoController'
})
.when('/rain', {
templateUrl : 'pages/rain.html',
controller : 'rainController'
});
});
soolApp.controller('mainController', function($scope) {
});
soolApp.controller('promoController', function($scope) {
});
soolApp.controller('rainController', function($scope) {
});
So, I'm at a loss. I have a job interview on Monday and was putting together this angular app for that purpose.
I think you should check your console of browser. You have done everything right. Here is the plunkr I created from your example. Its working. Only thing you should look into is the location of html files which might be giving 404 error.
And, Best of luck for the interview ;)
I have problems getting the bootstrap navbar + angular routing to work. I don't understand what is going on since a very similar code on another app is working.
I have the following html in my index.html
<div ng-controller="CoreController as core">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">myApplication</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="core.navHome">Home <span class="sr-only">(current)</span></li>
<li ng-class="core.navStatistic">Statistic</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
my app.js:
$routeProvider.when('/', { templateUrl: 'templates/home.html', controller: 'MainController', controllerAs: 'main' });
$routeProvider.when('/statistic', { templateUrl: 'templates/statistic.html', controller: 'StatisticController', controllerAs: 'statistic' });
// Default route
$routeProvider.otherwise({ redirectTo: '/' });
When I hit the statistic link, my URL shows:
http://localhost/myApplication/#!/#statistic
and I get see the home template.
The home button then shows "http://localhost/myApplication/#!/"
Is the #! the reason for this?
Ok after some research I found out that I this code worked for angular < 1.6.
To make the above code work in 1.6 you have to get ridd of the #! by adding this to the config:
$locationProvider.hashPrefix('');
Here is the original Post.
I am working on a ui-router issue.
I've managed to configure the main master page which will be in use throughout the child pages. Child pages content is fetched correctly as well.
Now, the point where I'm stuck is the login/register view. Since they'll not be part of the same master layout, they will be simple layout with html controls in the center of the page and nothing else I'm having a hard time to understand how can I include the login / register in the ui-router logic.
This is what I have so far:
ui-router logic:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/home");
$locationProvider.html5Mode(true);
$stateProvider
.state("home", {
url: "/home",
templateUrl: "/views/home/index.html",
controller: "homeController",
contrllerAs: "homeCtrl",
data: {
css: '/assets/css/homepage.css'
}
})
.state("ourteam", {
url: "/ourteam",
templateUrl: "/views/home/our-team.html"
})
.state("accountlogin", {
url: "/accountlogin",
templateUrl: "/views/home/login.html",
controller: "loginController"
})
});
master page (not the one for login) markup in shortened version:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
</head>
<body ng-app="app" ui-router-styles class="fixed-footer home-page">
<header class="header">
<div class="container">
<nav class=" navbar">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-nav-relm">
<li class="active"><a ui-sref="home">Home</a></li>
<li class="dropdown">
Borrowers <span class="caret"></span>
<ul class="dropdown-menu">
<li><a ui-sref="Link1">Link1</a></li>
<li><a ui-sref="Link2">Link2</a></li>
<li><a ui-sref="Link3">Link3</a></li>
</ul>
</li>
<li><a ui-sref="ourteam">Our Team</a></li>
<li><a ui-sref="contact">Contact</a></li>
<li><a ui-sref="accountlogin">Login</a></li>
</ul>
</div>
</nav>
</div>
</header>
<!-- START CHILD CONTENT -->
<ui-view></ui-view>
<!-- END CHILD CONTENT -->
</body>
</html>
Login page (shortened version):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body class="login">
<div class="content" ng-app="app">
<!-- BEGIN LOGIN FORM -->
<div class="login-form" ng-controller="loginController">
<div class="form-group">
<label>Email</label>
<input data-ng-model="loginData.userName" required autofocus/>
</div>
<div class="form-group">
<label>Password</label>
<input data-ng-model="loginData.password" required/>
</div>
<div>
<button type="submit" ng-click="Login()">Login</button>
</div>
</div>
<!-- END LOGIN FORM -->
</div>
</body>
</html>
Now what will be the proper way to redirect to that new layout (or incorporate in the existing master page)?
in 'Login function', first try authenticating the user by using backend methods and services like Passport and JWT.and then redirect to particular state if there's no error.Try this tutorial Authenticate a Node.js API with JSON Web Tokens
I am calling a Bootstrap Model on hyperlink.
My code was in "MasterPageNavBar.html"
Login/SignUp
Here is my completed code "MasterPageNavBar.html"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/bootstrap-theme.css" rel="stylesheet" />
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui-router.min.js"></script>
<script src="../Scripts/Collapse.JS"></script>
</head>
<body>
<div>
<div>
<h3>AngularJS Tutorial</h3>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mynavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-ui-sref="home">Home</a></li>
<li><a data-ui-sref="contactus">Contact</a></li>
<li>Gallery</li>
<li>About</li>
</ul>
<ul class="nav navbar-right navbar-nav">
<li>
Login/SignUp
<!-- Modal HTML -->
<form>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body form-group">
<input style="margin-bottom:15px" type="text" class="form-control " placeholder="User Name ---" />
<input style="margin-bottom:5px" type="text" class="form-control " placeholder="Password" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Login</button>
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
When i run alone this page , Modal was working fine. Here is the output of a model.
up to here code is fine.
My Problem is here
I am calling this "MasterPageNavBar.html page in another page "index.html". Here is my "Index.html" code( this my start page).
**<div ng-include="'../Views/MasterPageNavBar.html'"></div>**
<div ng-include="'../Views/ContentPage.html'"></div>
Modal window is not working through running "Index.html" page.
One thing i have noticed that " when on click Login link 'UI-Route functionality is working' and it's is looking for a myModel page and its is not finding. Below is my ui.route module. ( I don't want to call this ui.rotuer on click Login link.
**Login/SignUp**
var myrouting=angular.module('routingDemoApp', ['ui.router'])
myrouting.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("", "/index")
$stateProvider
.state('index', {
url: "/index",
templateUrl: "../Views/home.html"
})
.state('contactus', {
url: "/contactus",
templateUrl: "../Views/contactus.html",
})
.state('home', {
url: "/home",
templateUrl: "../Views/home.html",
})
You can use ng-click to open your modal as given below:
Login/SignUp
In your controller write the following code:
$scope.openModal= function(){ $("#myModal").modal("show"); }
I hope it will help you
Your best bet is to use the data-target attribute that Bootstrap supports (http://getbootstrap.com/javascript/#via-data-attributes). Use it like data-target="#myModal" and remove the href="". Then Angular will not attempt to navigate to it.