I'm trying to use Angular JS with Laravel 4.2. I've changed the blade's default {{}} into [[]], it works perfectly, now the problem is that when I puts Angular JS code in main layout (view) it works but when I put Angular JS code in a child view(actually child view extends the main layout and section is yielded using #section('contents') ...Angular JS code... #stop) it doesn't work at all, browser can't render the Angular JS exprerssion and shows it as it is in code editor! Here is my "main layout.blade.php" and "child.blade.php":
"main.layout.blade.php"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
[[ HTML::style('css/bootstrap.min.css') ]]
[[ HTML::style('css/custom.css') ]]
[[--angular js files--]]
[[HTML::script('/js/angular/angular.min.js')]]
[[HTML::script('/js/controllers.js')]]
[[--jquery bootsrtap js files--]]
[[ HTML::script('js/respond.js') ]]
[[ HTML::script('js/jquery-1.11.2.min.js') ]]
[[ HTML::script('js/bootstrap.min.js') ]]
</head>
<body>
#include('layouts.main-menu')
<div class="container" id="container">
<div ng-app=""><!-- This Angular JS works fine -->
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
#yield('content')
</div>
#include('layouts.footer')
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
Child.blade.php
#extends('layouts.main')
<!doctype html ng-app="myApp">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
#section('content')
<div ng-app=""><!-- This Angular JS doesn't work fine -->
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
#stop
</body>
</html>
You can see clearly that same Angular Code snippet is used in both files but in "layout.main.blade.php" it works and in "child.blade.php" it doesn't work as it is in between #section('content') ... #stop I can't get understand why this is and how to solve it!!!!!!
This is the response from network panel:
GET localhost:8000
200 OK
localhost:8000
3.4 KB
[::1]:8000
141ms
HeadersResponseHTMLCacheCookies
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/bootstrap.min
.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/custom.css">
<script src="http://localhost:8000/js/angular/angular.min.js"></script>
<script src="http://localhost:8000/js/controllers.js"></script>
<script src="http://localhost:8000/js/respond.js"></script>
<script src="http://localhost:8000/js/jquery-1.11.2.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"
>
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>
MENU
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/" ><span class="glyphicon
glyphicon-home"></span> Home</a></li>
<!--<li class="dropdown"><a href="#" data-toggle="dropdown">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dr. Winthrop</li>
<li>Dr. Chase</li>
<li>Dr. Sanders</li>
</ul>
</li>-->
<li><span class="glyphicon glyphicon-edit"></span> Make CV</li
>
<li><span class="glyphicon glyphicon-eye-open"></span> Example</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in</li
>
<li>Sign Up</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="container">
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="">
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
</div>
<footer class="footer row ">
<div class="col-lg-4 col-sm-4 col-md-4" id="links">
<h4>Links</h4>
<ul class="list-unstyled">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</footer>
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
1 request
3.4 KB
141ms (onload: 1.06s)
I'm not a blade user so I can't tell you exactly how to fix this. I do use PHP but I use Eloquent (the ORM part of Laravel) and use Slim for doing the server side routing. I believe it's best to write your HTML simply as HTML, use $http (basically the same as $.ajax) to get your data into the client code but write them as totally separate code bases. This will afford you a lot more flexibility and greatly simplify the task of debugging since you aren't trying to figure out issues between the server and client simultaneously. You can test the server in isolation using curl or POSTMan and then can separately build/test the client using mock objects or real requests to your server side component.
On the client side of things what you show being output has quite a few problems though, multiple html tags (should be 1 for the document) multiple ng-app (same, 1 for the page typically on the html or body tag).
For bootstrap use ui-bootstrap, you need the regular bootstrap.css file and the ui-bootstrap-tpls.js file but not bootstrap.js.
Where you have the jQuery to bind to a click event on some elements you should be using an ng-click directive in the markup instead, also can use ng-class to conditionally add/remove a class to an element based on the state of a model.
It seems like you have an understanding of roughly how to use all these things but you need to clearly separate things and stop using jQuery for a while to get used to how to do things with Angular properly. If you try to use jQuery outside of directives or tests with Angular you're typically doing something wrong. For details see "Thinking in AngularJS" if I have a jQuery background?
Related
So, at the moment I have an index.html page that contains every single reference to all scripts I need (angular libraries, jquery libraries, third party plugins, custom javascripts, controllers, directives, services, etc). As you can see this is not ideal because the browser will load all of these dependencies when not all of them are really needed all the time.
Is there a way to load only the scripts needed by the view that is loaded? In the same fashion, these scripts must be removed when the view changes, and accept news if needed.
I've made a sample plunker with some simple stuff representing my problem
<html ng-app="myapp">
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Sample</a>
<ul class="nav">
<li>
<a ui-sref="route1">Route 1</a>
</li>
<li>
<a ui-sref="route2">Route 2</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- App Script -->
<script src="app.js"> </script>
<!-- This is what I have now and no likey-->
<script src="script1.js"> </script>
<script src="script2.js"> </script>
<script src="script3.js"> </script>
<script src="script4.js"> </script>
<script src="script5.js"> </script>
<script src="script6.js"> </script>
<script src="script7.js"> </script>
.
.
.
<script src="script100.js"> </script>
</body>
</html>
I am trying to use UI router but I can't get to open the view of the first page don't know why it won't show the template. It would only show the index.html element. Help would be appreciated I am new to Angular
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webstie Designing</title>
<!-- Angular Scripts -->
<script src="js/angular.min.js"></script>
<script src ="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<!-- Application Scripts-->
<script type="text/javascript">"app/app.js"</script>
</head>
<body id="page-top" ng-app="portfolio">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<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">
<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 page-scroll" href="#/">Web Designing</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 navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
(function(){
"use strict";
var app = angular.module("portfolio",["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider",
function("$stateProvider","$urlRouterProvider"){
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home",{
url:"/",
templateUrl:"app/Intro.html"
})
}]
);
}());
First thing you need to refer app.js script reference correctly to make portfolio module available for ng-app
<script type="text/javascript" src="app/app.js"></script>
instead of
<script type="text/javascript">"app/app.js"</script>
I am using angular JS with angular-route and ui bootstrap to build a form with dropdownlist.
My problem is thaht when I put the ui-bootstrap dropdownlist component inside an ng-view, the component is not working as supposed, whereas when I put it outside of the ng-view it is working correctly.
For me it comes from the fact that the data binding is not working well but I didn't manage to find why.
Code is more explicit than words : see here on plnkr
<html>
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="bootstrap#3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="routeApp">
<h1>Hello Plunker!</h1>
<nav>
Page d'accueil
Page de contact
</nav>
<div ng-view></div>
<div ng-controller='DropdownCtrl'>
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
{{button}} <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">
{{action}}
</li>
</ul>
</div>
</div>
</body>
</html>
You will see that the Button dropdown is working well outside of the ng-view but will not work any more inside the ng-view.
Thanx in advance
The problem is you are using href=# on the links. Remove the # and it works fine.
Since angular routing is using hash based routes the # is causing a route change attempt
DEMO
I am new to angularjs,i made a sample app on plunker i am trying to display data that user enter after submit on other page.When user click on submit button the user data page should be displayed and all data given by user is displayed there.
here is my sample app index.html:
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<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" />
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="script.js"></script>
<script src="homeDirective.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ui-view></div>
</div>
<footer class="text-center">
View the tutorial on Scotch.io
</footer>
</body>
</html>
An easy approach to this would be to store the submitted form data inside a service using a variable that is updated upon submit.
Then upon route change, the router can resolve the form data by making a request to that service for it before loading the next view, resulting in it being available for the next controller.
Hope that helps you out!
How should i implement this:
4 tabs which open onclick and loads a view in to a child.
Tried with 4 ng-view tags and hiding 3 of them but it doesn't feel right. How should I display my content in the right tab?
<section id="tabs">
<div class="tab open">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
</section>
you should use bootstrap for a tabs and ng-include for a content
something like this
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div ng-include src="'red.html'"></div>
</div>
<div class="tab-pane" id="orange">
<div ng-include src="'orange.html'"></div>
</div>
<div class="tab-pane" id="yellow">
<div ng-include src="'yellow.html'"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
Angular UI bootstrap module has all the twitter bootstrap components ported as angular modules. You should be using it instead of reinventing it (unless you cannot/dont want to use twitter bootstrap).
tldr: Try using bootstraps tabs component from angular UI bootstrap