I am doing a project in Symfony2 and Angular JS.
I have installed FOSJsRoutingBundle for routing purposes.
This is my home page - http://localhost/stars/admin/ and i am doing in wamp server.
home page
Home page word fine. You can see a side bar which holds some links like sun, stars, home etc..
My requirement is when i click on these links, it should use angularjs routing, not the default routing..
How can i acheive this..
my layout.html.twig
<body ng-app="myApp">
<div class="container">
<!--Header Bar-->
<div id="header"></div>
<!--Side Bar-->
<div id="sidebar">
<ul class="sidebar-menu">
<li class="active treeview">
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#sun">
<span>Sun</span>
</a>
</li>
<li>
<a href="#/stars">
<span>Stars</span>
</a>
</li>
<li>
<a href="#/planets">
<span>Planets</span>
</a>
</li>
<li>
<a href="#/moon">
<span>Moon</span>
</a>
</li>
</ul>
</div>
<!--Main Content-->
<div id="content" ng-view>{% block body %}{% endblock %} </div>
</div>
</body>
<!--Angular JS-->
<script src="{{ asset('js/angular.js') }}"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
<script type="text/javascript">
Routing.generate('_home_url');
</script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('', {templateUrl: Routing.generate('_home_url')}).
when('/sun', {templateUrl: Routing.generate('_sun_url')}).
otherwise({redirectTo: ''});
}]);
</script>
my routing.yml
# app/config/routing.yml
fos_js_routing:
resource: "#FOSJsRoutingBundle/Resources/config/routing/routing.xml"
_home_url:
pattern: admin/
defaults: { _controller: AppBundle:admin/index:list }
options:
expose: true
_sun_url:
pattern: admin/sun
defaults: { _controller: AppBundle:admin/sun:index }
options:
expose: true
my config.yml
fos_js_routing:
routes_to_expose: [ _home_url,_sun_url ]
Please help me, i am new user in symfony2 and angularJS..
You can use ngHref directive see this
reference
<a ng-href="/sun"><span>Sun</span></a>
Alternatively you can use ui-router
alterative for angular ngRoute and you can use ui-sref directive for the links see this reference
Related
please tell me why it isn't loading partials.
I'm trying to do routing and inserting a partial templates into the layout HTML page when you click on a specific hyperlink such as Home, about or contact.
I checked in every line of code and I didn't find the source of problem for not loading partials. Routes are doing fine, it just isn't loading.
Here's my code:
index.html
<html ng-app="streamApp">
<head>
<meta charset="utf-8">
<!-- To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StreamTest App</title>
<!-- load bootstrap and fontawesome -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="styles/style.css"/>
</head>
<body ng-app="streamApp" ng-controller="MainController">
<div id="main">
<!-- including header -->
<div ng-include="'views/templates/header.html'"></div>
<!-- this is where content will be injected -->
<div id="container" style="margin-top: 50px;">
<ng-view></ng-view>
</div>
<!-- including footer -->
<div ng-include="'views/templates/footer.html'"></div>
</div>
</body>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script src="app.js"></script>
<!-- Scripts End -->
</html>
app.js
// create the module named streamapp and include ngRoute for routing needs
var streamApp = angular.module('streamApp',['ngRoute']);
//configure app's routes
streamApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
//route for the home page
.when('/home', {
templateURL : 'views/partials/home.html',
controller : 'MainController'
})
//route for the about page
.when('/about', {
templateURL : 'views/partials/about.html',
controller : 'aboutController'
})
//route for the contact page
.when('/contact', {
templateURL : 'views/partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/home'
});
}]);
// create the controller and inject Angular's $scope
streamApp.controller("MainController", function ($scope) {
// create a message to display in our view
$scope.home="Welcome Home!";
});
streamApp.controller("aboutController", function ($scope) {
// create a message to display in our view
$scope.about="Wanna hear about us! Here you are :)";
});
streamApp.controller("contactController", function ($scope) {
// create a message to display in our view
$scope.contact="Don't be shy to contact us!";
});
header.html
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#home">StreamTEST</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-envelope"></i> Contact</li>
</ul>
</div>
</div>
</nav>
</header>
home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home }}</p>
</div>
about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about }}</p>
</div>
contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact }}</p>
</div>
I had changed the default hash-prefix from '!' to empty string '' in app.js cause I'm using angularjs 1.6
$locationProvider.hashPrefix('');
Remove ng-app from your body element. You already have it on the outer html element.
I use ui-router instead of ngRoute, but they are very similar. A couple of things.
You need to set Html5Mode, which means you need to inject $locationProvider into your config and then issue:
$locationProvider.html5Mode(true)
You should set the base href in the <head> section of your index.html with:
<base href="/" >
You might also want to try ng-href instead of href on your links.
am new to angular js and learning. i tried a very simple example but it seems everything is right, but not working... I tried routing with two simple html files. The content of html should be placed on a ng-view div, when a userlist is clicked.. Please help in this... thanks in advance.. below is the code
<!DOCTYPE html>
<html>
<head>
<title>Main Page </title>
<script src="js/angular.min.js"> </script>
<script src="js/angular-route.min.js"></script>
<script>
var myApp = angular.module('myApp',['ngRoute']);
myApp.config (function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/first.html',
controller: 'FirstController'
})
.when('/Second', {
templateUrl: 'pages/second.html',
controller: 'SecondController'
});
});
myApp.controller('FirstController',function($scope){
});
myApp.controller('SecondController',function($scope){
});
</script>
</head>
<body ng-app="myApp">
<ul>
<li> Home Page</li>
<li> Go to First Page </li>
<li> <a href="#/Second"> Go to Second Page </li>
<h1> Main Page is here</h1>
</ul>
<div ng-view></div>
</body>
</html>
You have not closed the second </a>
<ul>
<li> Home Page</li>
<li> Go to First Page </li>
<li> Go to Second Page </li>
<h1> Main Page is here</h1>
</ul>
DEMO
I am working through the mean-machine tutorial and have come to a road block when using ng-view to inject pages into the main layout. I have configured the routes in app.routes.js, defined the controllers in app.js, as well as created the html files for each page. Both app.js and app.routes.js have been loaded into the index.html file. mainController is working fine, just not the ancillary controllers. Please see the code below. Any idea on what I am doing wrong?
public/views/index.html
<html>
<head>
<meta charset="utf-8">
<title>My Routing App!</title>
<!-- set the base path for angular routing -->
<base href="/">
<!-- CSS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body { padding-top:50px; }
</style>
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<!-- load our custom angular app files -->
<script src="js/app.js"></script>
<script src="js/app.routes.js"></script>
</head>
<body class="container" ng-app="routerApp" ng-controller="mainController as main">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<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>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<main>
<!-- angular templating will go here -->
<!-- this is where content will be injected -->
<div ng-view></div>
</main>
</body>
</html>
public/js/app.js
angular.module('routerApp', ['routerRoutes'])
// create the controllers
// this will be the controller for the ENTIRE site
.controller('mainController', function() {
var vm = this;
// create a bigMessage variable to display in our views
vm.bigMessage = 'A smooth sea never made a skilled sailor.';
})
// home page specific controller
.controller('homeController', function() {
var vm = this;
vm.message = 'This is the home page!';
})
// about page controller
.controller('aboutController', function() {
var vm = this;
vm.message = 'Look! I am an about page.';
})
// contact page controller
.controller('contactController', function() {
var vm = this;
vm.message = 'Contact us! JK. This is just a demo.';
});
public/js/app.routes.js
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateURL: 'views/pages/home.html',
controller: 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateURL: 'views/pages/about.html',
controller: 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateURL: 'views/pages/contact.html',
controller: 'contactController',
controllerAs: 'contact'
});
// set our app to have pretty URLS
$locationProvider.html5Mode(true);
});
public/views/pages/home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home.message }}</p>
</div>
public/views/pages/about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about.message }}</p>
</div>
public/views/pages/contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact.message }}</p>
</div>
Are you sure your templateURL properties have the right value? Try with public/views/pages/home.html or any full URL that shows up when you browse to your application in your browser.
See the documentation on the $routeProvider : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider.
I am trying to crate a MVC application with Angular. My application has common Header and footer. So I added it in _layout.cshtml. There are some static pages in the application. Hence I want to load this using Angular routing.
Here is my _layout.cshtml
<!DOCTYPE html>
<html data-ng-app="HappyHut">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse #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>
#Html.ActionLink("Happy Hut", "Main", "Home", new { area = "" }, new { #class = "navbar-brand page-scroll" })
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
<li>About Us</li>
<li>Login</li>
<li>Register</li>
<li>Test</li>
</ul>
</div>
</div>
</div>
<div class="container body-content" data-ng-view>
#RenderBody()
<hr />
<footer>
footer data
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
#Scripts.Render("~/bundles/Angular")
</body>
</html>
For testing purpose I have inserted some test html data in main.cshtml.
and here is my js file.
var HappyHut = angular.module("HappyHut", ['ngRoute']);
HappyHut.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('!').html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/ContactUs', {
templateUrl: 'Home/Contact'
})
.when('/AboutUs', {
templateUrl: 'Home/About'
})
.when('/Test', {
templateUrl: 'Home/Test'
});
}]);
Here the test.cshtml is like
#{
//Layout = null;
}
Hi Test
When I am loading Main.cshtml, the page gets loaded but body part gets hidden. If I click on Test, it gets loaded. However, if I add Layout = null, the same thing happens as Main.cshtml and a pop-up is opened which says
page is not running due a long running script
in the console it logs below error more than once for above issue
tried to load angular more than once
. Now I don't want to copy Header and footer in all the pages.
Can anybody please tell me how to proceed to make Main page content visible or all the pages which will be created using _layout.cshtml?
change the ng-view to ui-view and used 'ui.router' insted of ngroute,
alternative solution avaialble here
AngularJS Ui-Router with ASP.Net MVC RouteConfig. How does it work?
I am using asp mvc 4 and angular js.
this is my html when the application loads(Course/Index):
<div class="container" ng-app="appModule">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Course Managment</li>
<li>Course Assignment</li>
</ul>
</div>
</div>
</div>
<ng-view></ng-view>
</div>
and this is my appModule:
angular.module("appModule", ["ngRoute", "CoursesListCtrl", "repositoryBaseFactory"])
.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when("/Course/List", {
templateUrl: "templates/coursesList.html",
caseInsensitiveMatch: true
});
}]);
When clicking on the Course Managment link I want the coursesList.html to be loaded. Instead the framework is trying to go the server and find action List and returns an error.
What am I missing here?
Try this
<a ng-href="#/Course/List">Course Managment</a>