I deployed broadleaf demo site on standalone tomcat server with mysql as backend and standalone solr server. I can access the solr server on 8983 port. I see that my cores are available at http://localhost:8983/solr/#/catalog and catalog_reindex (note the hash in url). I changed the common-shared.properties file to point to right URL but when I try to hit the SiteApplication, I get following error
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Error 405 HTTP method POST is not supported by this URL</title>
</head>
<body><h2>HTTP ERROR 405</h2>
<p>Problem accessing /solr/index.html. Reason:
<pre> HTTP method POST is not supported by this URL</pre></p>
</body>
</html>
After this I extended the SolrSearchServiceImpl and changed the request method to GET but now I am getting error Expected mime type application/octet-stream but got text/html. and in response I get an html response with no detailed reason.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="solrAdminApp">
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<head>
<title>Solr Admin</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico?_=6.2.1">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/common.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/analysis.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/cloud.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/cores.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/collections.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/dashboard.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/dataimport.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/files.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/index.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/styles/java-properties.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/logging.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/menu.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/plugins.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/documents.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/query.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/stream.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/replication.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/schema.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/segments.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/threads.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/chosen.css?_=6.2.1">
<meta http-equiv="x-ua-compatible" content="IE=9">
<script src="libs/jquery-2.1.3.min.js"></script>
<script src="libs/chosen.jquery.js"></script>
<script src="libs/jquery.jstree.js"></script>
<script src="libs/angular.js"></script>
<script src="libs/angular-chosen.js"></script>
<script src="libs/angular-resource.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="libs/angular-cookies.min.js"></script>
<script src="libs/ngtimeago.js"></script>
<script src="libs/highlight.js"></script>
<script src="libs/d3.js"></script>
<script src="js/angular/app.js"></script>
<script src="js/angular/services.js"></script>
<script src="js/angular/controllers/index.js"></script>
<script src="js/angular/controllers/logging.js"></script>
<script src="js/angular/controllers/cloud.js"></script>
<script src="js/angular/controllers/collections.js"></script>
<script src="js/angular/controllers/cores.js"></script>
<script src="js/angular/controllers/threads.js"></script>
<script src="js/angular/controllers/java-properties.js"></script>
<script src="js/angular/controllers/core-overview.js"></script>
<script src="js/angular/controllers/collection-overview.js"></script>
<script src="js/angular/controllers/analysis.js"></script>
<script src="js/angular/controllers/dataimport.js"></script>
<script src="js/angular/controllers/documents.js"></script>
<script src="js/angular/controllers/files.js"></script>
<script src="js/angular/controllers/query.js"></script>
<script src="js/angular/controllers/stream.js"></script>
<script src="js/angular/controllers/plugins.js"></script>
<script src="js/angular/controllers/replication.js"></script>
<script src="js/angular/controllers/schema.js"></script>
<script src="js/angular/controllers/segments.js"></script>
</head>
<body ng-controller="MainController">
<div id="wrapper" scrollable-when-small>
<div id="header">
<span>Apache SOLR</span>
<p id="environment"> </p>
</div>
<div id="main" class="clearfix">
<div class="header-message" id="init-failures" ng-show="showInitFailures">
<h2>SolrCore Initialization Failures</h2>
<ul>
<li ng-repeat="(core,error) in initFailures"><strong>{{core}}:</strong> {{error}}</li>
</ul>
<p>Please check your logs for more information</p>
</div>
<div id="loading" class="loader universal-loader" loading-status-message> </div>
<div id="connection-box" connection-message>
<div id="connection-status-modal">
</div>
<div class="connection-status header-message">
<h2>Connection to Solr lost</h2>
<p>Please check the Solr instance.</p>
</div>
<div class="connection-status header-message" id="connection-status-recovered" ng-show="connectionRecovered">
<h2>Connection recovered...</h2>
<p>Continuing to load data...</p>
</div>
</div>
<div id="http-exception" class="header-message" ng-repeat="(url, exception) in exceptions">
<div class="exception">{{exception.msg}}</div>
</div>
<div class="other-ui-link">
Use <a class="ul" href="/solr/old.html">original UI</a><a target="_blank" href="http://wiki.apache.org/solr/AngularUI"> <span class="help"></span></a>
</div>
<div id="content-wrapper">
<div ng-view id="content">
</div>
</div>
<div id="menu-wrapper">
<div>
<ul id="menu">
<li id="index" class="global" ng-class="{active:page=='index'}"><p>Dashboard</p></li>
<li id="logging" class="global" ng-class="{active:page=='logging'}"><p>Logging</p>
<ul ng-show="showingLogging">
<li class="level" ng-class="{active:page=='logging-levels'}">Level</li>
</ul>
</li>
<li id="cloud" class="global optional" ng-show="isCloudEnabled" ng-class="{active:showingCloud}"><p>Cloud</p>
<ul ng-show="showingCloud">
<li class="tree" ng-class="{active:page=='cloud-tree'}">Tree</li>
<li class="graph" ng-class="{active:page=='cloud-graph'}">Graph</li>
<li class="rgraph" ng-class="{active:page=='cloud-rgraph'}">Graph (Radial)</li>
<li class="dump" ng-class="{active:page=='cloud-dump'}"><a ng-click="dumpCloud()">Dump</a></li>
</ul>
</li>
<li ng-show="isCloudEnabled" id="collections" class="global" ng-class="{active:page=='collections'}"><p>Collections</p></li>
<li ng-hide="isCloudEnabled" id="cores" class="global" ng-class="{active:page=='cores'}"><p>Core Admin</p></li>
<li id="java-properties" class="global" ng-class="{active:page=='java-props'}"><p>Java Properties</li>
<li id="threads" class="global" ng-class="{active:page=='threads'}"><p>Thread Dump</p></li>
</ul>
<div id="collection-selector" ng-show="isCloudEnabled">
<div id="has-collections" ng-show="collections.length!=0">
<select data-placeholder="Collection Selector"
ng-model="currentCollection"
chosen
ng-change="showCollection(currentCollection)"
ng-options="collection.name for collection in collections"></select>
</div>
<p id="has-no-collections" ng-show="collections.length==0"><a href="#/~collections">
No collections available
<span>Go and create one</span>
</a></p>
</div>
<div id="collection-menu" class="sub-menu" ng-show="currentCollection">
<ul>
<li class="overview" ng-class="{active:page=='collection-overview'}"><span>Overview</span></li>
<li class="analysis" ng-class="{active:page=='analysis'}"><span>Analysis</span></li>
<li class="dataimport" ng-class="{active:page=='dataimport'}"><span>Dataimport</span></li>
<li class="documents" ng-class="{active:page=='documents'}"><span>Documents</span></li>
<li class="files" ng-class="{active:page=='files'}"><span>Files</span></li>
<li class="query" ng-class="{active:page=='query'}"><span>Query</span></li>
<li class="stream" ng-class="{active:page=='stream'}"><span>Stream</span></li>
<li class="schema" ng-class="{active:page=='schema'}"><span>Schema</span></li>
</ul>
</div>
<div id="core-selector">
<div id="has-cores" ng-show="cores.length!=0">
<select data-placeholder="Core Selector"
ng-model="currentCore"
chosen
ng-change="showCore(currentCore)"
ng-options="core.name for core in cores"></select>
</div>
<p id="has-no-cores" ng-show="cores.length==0"><a href="#/~cores">
No cores available
<span>Go and create one</span>
</a></p>
</div>
<div id="core-menu" class="sub-menu" ng-show="currentCore">
<ul>
<li class="overview" ng-class="{active:page=='overview'}"><span>Overview</span></li>
<li ng-hide="isCloudEnabled" class="analysis" ng-class="{active:page=='analysis'}"><span>Analysis</span></li>
<li ng-hide="isCloudEnabled" class="dataimport" ng-class="{active:page=='dataimport'}"><span>Dataimport</span></li>
<li ng-hide="isCloudEnabled" class="documents" ng-class="{active:page=='documents'}"><span>Documents</span></li>
<li ng-hide="isCloudEnabled" class="files" ng-class="{active:page=='files'}"><span>Files</span></li>
<li class="ping" ng-class="{active:page=='ping'}"><a ng-click="ping()"><span>Ping</span><small class="qtime" ng-show="showPing"> (<span>{{pingMS}}ms</span>)</small></a></li>
<li class="plugins" ng-class="{active:page=='plugins'}"><span>Plugins / Stats</span></li>
<li ng-hide="isCloudEnabled" class="query" ng-class="{active:page=='query'}"><span>Query</span></li>
<li ng-hide="isCloudEnabled" class="replication" ng-class="{active:page=='replication'}"><span>Replication</span></li>
<li ng-hide="isCloudEnabled" class="schema" ng-class="{active:page=='schema'}"><span>Schema</span></li>
<li class="segments" ng-class="{active:page=='segments'}"><span>Segments info</span></li>
</ul>
</div>
</div>
</div>
<div id="meta">
<ul>
<li class="documentation"><span>Documentation</span></li>
<li class="issues"><span>Issue Tracker</span></li>
<li class="irc"><span>IRC Channel</span></li>
<li class="mailinglist"><span>Community forum</span></li>
<li class="wiki-query-syntax"><span>Solr Query Syntax</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
My SOLR version is 6.2.1 and Broadleaf version is 5.2.1
This is something that has to do with the indexing phase in Solr.
I bet that if you have a look at Solr logs you will find some error (e.g. missing required field, multiple values for a non multivalued field)
Andrea
P.S. I don't know Broadleaf commerce but, the URL you should configure in the admin panel shouldn't have the # symbol, this is only valid in the admin console, which is implemented using AngularJS (that's the reason why the URL looks like that)
Related
I am new to angular and attempting to get my routing to work. It is coming up with nothing.
I'm using dreamweaver, it prompts me with the error "angular is not defined" but the js file is placed after the angular ones in the header?
When I click the links it does not direct me to anything and nothing is viewed. I suspect that either the code is broken or I am not setting up the ng-view correctly.
Would anyone be able to advise on how to get it working?
<header class="hidden-sm" >
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap/dist/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?
family=Droid+Serif|Roboto:300"
rel="stylesheet">
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</header>
<nav class="container" id="main-nav">
<ul id="navlist">
<li class="navli">Build a PC</li>-
<li class="navli">About Us</li>-
<li class="navli"><a href="#/"><img src="images/hive32color.png"
alt="bee-logo"></a></li>-
<li class="navli">Contact Us</li>-
<li class="navli">Inside our Machines</li>
</ul>
</nav>
<section class="container">
<div class="col-lg-9" ng-view>
</div>
<aside class="col-lg-3">
</aside>
</section>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</body>
angular.module('myApp', ['ngRoute','RouteControllers']);
angular.module('myApp').config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',{
templateUrl:'templates/about.html',
controller:'AboutController'
})
.when('/build',{
templateUrl:'templates/build.html',
controller:'BuildController'
})
.when('/contact',{
templateUrl:'templates/contact.html',
controller:'ContactController'
})
.when('/inside',{
templateUrl:'templates/inside.html',
controller:'InsideController'
});
});
edit: I realised i was not running a web server, i have done that now and it still is not working!
there is no need to add "/" after "#" in href. Just try href="#Contact" for your reference https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
I am sure there are techniques to have a better SEO approach using AngularJS features, (https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/).
As an example, the source code of a project I am currently developing, returns the next:
<html lang="en" data-ng-app="ByTheWayApp" data-ng-controller="general">
<head>
<title>ByTheWay</title>
<base href="/" />
<meta charset="utf-8" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700|Courgette|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,latin-ext" rel="stylesheet">
<link
rel="stylesheet"
type="text/css"
href="/assets/css/bytheway.css">
<link
rel="stylesheet"
type="text/css"
ng-href="{{ templateCSS }}">
</head>
<body>
<app>
<div class="loading">
<span>ByTheWay</span>
</div>
<div class="app-wrapper {{ displayClass }}" load >
<header class="header h-3 fixed">
<div class="inner-wrapper">
<div class="brand wpx-7">
<a href="/">
<h1 class="title"><span>ByTheWay</span></h1>
<h2 class="slogan"><span>chasing dreams worldwide</span></h2>
</a>
</div>
<nav class="nav w-auto text-right aw-const" id="nav">
home
sign in
<strong>sign up</strong>
</nav>
</div>
</header>
<div class="page" data-ng-controller="page" data-ng-view>
<!-- Here Go Every Page Templates using $routeProvider.when('',{}); -->
</div>
</div>
</app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
<script type="text/javascript" src="/assets/js/bytheway.js"></script>
</body>
</html>
.
<div class="page"></div> would contain the Template .html file content, but it is not displayed when I check the source code, does the same happen when Google Spiders/Bots crawl my site ?
ps. I am not using yet meta tags, such description, tags, etc, because I am yet defining relevant content to be displayed.
Thank you and all the best
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I figured out how to get this work with k-rel insteal of open.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
k-rel="'actionsheet'"
href="#mnuProfile"></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I have the following document which I need to pass values into a template using handlebars. I have managed to display all the values except for those of reps and kilos which I can't seem to access.
How could I write my template code to reach those values? I want to print them out in pairs, so reps[0] with kilos[0] and so on.
{
"personId": "Mario",
"date": "7-10-2014",
"workout": {
"exercise": "Military Press",
"musclegroup": "Shoulders",
"sets": [
{
"reps": [
"20",
"30"
],
"kilos": [
"22",
"33"
]
}
]
}
}
This is my template so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- CSS Stylesheets -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./../../static/styles/main.css">
<!-- Adding google fonts -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300|Satisfy' rel='stylesheet' type='text/css'>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Title & logo -->
<div id="header">
<h1><i class="fa fa-book"></i> loGym</h1>
</div>
<!-- Main body of page -->
<main role=”main”>
<div id="content">
<h2><strong>Workout</strong></h2>
{{#if content}}
{{#content}}
<p><strong>Date</strong> - {{date}}</p>
<p><strong>Muscle Group</strong> - {{workout.musclegroup}}</p>
<p><strong>Exercise</strong> - {{workout.exercise}}</p>
<p><strong>Sets</strong></p>
<ul id="setList">
{{#sets}}
<li>Reps: {{reps}} - KG: {{kilos}}</li>
{{/sets}}
</ul>
{{/content}}
{{else}}
<p>There are not documents avalable.</p>
{{/if}}
</div>
<form>
<input type="button" id="homeButton" class="buttons" value="Home Page" onclick="window.location.href='/'">
</form>
</main>
</body>
</html>
You need to utilize the {{#each}} and {{this}} statements. Not 100% sure on the formatting you are going for, but here's a quick example.
{{#if content}}
{{#content}}
<p><strong>Date</strong> - {{date}}</p>
<p><strong>Muscle Group</strong> - {{workout.musclegroup}}</p>
<p><strong>Exercise</strong> - {{workout.exercise}}</p>
<p><strong>Sets</strong></p>
<ul id="setList">
{{#sets}}
<li>Reps: {{#each reps}}{{this}}{{/each}} - KG: {{#each kilos}}{{this}}{{/each}}</li>
{{/sets}}
</ul>
{{/content}}
{{else}}
<p>There are not documents avalable.</p>
{{/if}}
How can we avoid including all .js and .css files in the index.html like in this example :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<base href="/">
<meta charset="utf-8">
<title>ShowTrackr</title>
<link href="favicon.png" rel="icon" type="image/png">
<link href='http://fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="//cdn.jsdelivr.net/ionicons/1.4.1/css/ionicons.min.css" rel="stylesheet">
<link href="stylesheets/animate.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
<div class="navbar-header">
<a class="navbar-brand" href="/">
<span>Show<strong>Trackr</strong></span>
</a>
</div>
<ul class="nav navbar-nav">
<li data-match-route="/$">Home</li>
<li data-match-route="/add">Add</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="!currentUser">
<li data-match-route="/login">Login</li>
<li data-match-route="/signup">Sign up</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="currentUser">
<li class="navbar-text" ng-bind="currentUser.email"></li>
<li>Logout</li>
</ul>
</div>
<div ng-view class="{{pageClass}}"></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-strap.js"></script>
<script src="vendor/angular-strap.tpl.js"></script>
<script src="vendor/angular-messages.js"></script>
<script src="vendor/angular-resource.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="vendor/moment.min.js"></script>
<script src="app.js"></script>
<script src="filters/fromNow.js"></script>
<script src="directives/uniqueEmail.js"></script>
<script src="directives/passwordStrength.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/add.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/signup.js"></script>
<script src="services/auth.js"></script>
<script src="services/show.js"></script>
<script src="services/subscription.js"></script>
<!--<script src="app.min.js"></script>-->
<!--<script src="templates.js"></script>-->
</body>
</html>
This code comes from this github : https://github.com/sahat/tvshow-tracker
The code is used for a tutorial : http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/
I'd like to do something like :
angular.module("MyApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller: "homeCtrl"
/*
Here say to include in the same time specific .js
(for example the one who contain the 'homeCtrl' controller) and .css
*/
});
}]);
Because with the html code above, there are going to be a lot of server requests and possibly useless (If the user don't use the whole application). I cannot imagine Google didn't think of it.
You can inline the CSS and JS code in the view. If the view is cacheable it is not a big issue.
You may want to take a look at http://webcomponents.org
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/